adaptive.js 31 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756
  1. $axure.internal(function($ax) {
  2. $ax.adaptive = {};
  3. $axure.utils.makeBindable($ax.adaptive, ["viewChanged"]);
  4. var _auto = true;
  5. var _autoIsHandledBySidebar = false;
  6. var _views;
  7. var _idToView;
  8. var _enabledViews = [];
  9. var _initialViewToLoad;
  10. var _initialViewSizeToLoad;
  11. var _loadFinished = false;
  12. $ax.adaptive.loadFinished = function() {
  13. if(_loadFinished) return;
  14. _loadFinished = true;
  15. if($ax.adaptive.currentViewId) $ax.viewChangePageAndMasters();
  16. else $ax.postAdaptiveViewChanged();
  17. };
  18. var _handleResize = function(forceSwitchTo) {
  19. if(!_auto) return;
  20. if(_auto && _autoIsHandledBySidebar && !forceSwitchTo) return;
  21. var $window = $(window);
  22. var height = $window.height();
  23. var width = $window.width();
  24. var toView = _getAdaptiveView(width, height);
  25. var toViewId = toView && toView.id;
  26. _switchView(toViewId, forceSwitchTo);
  27. };
  28. var _setAuto = $ax.adaptive.setAuto = function(val) {
  29. if(_auto != val) {
  30. _auto = Boolean(val);
  31. }
  32. };
  33. var _setLineImage = function(id, imageUrl) {
  34. $jobj(id).attr('src', imageUrl);
  35. };
  36. var _switchView = function (viewId, forceSwitchTo) {
  37. //if(!$ax.pageData.isAdaptiveEnabled) return;
  38. var previousViewId = $ax.adaptive.currentViewId;
  39. if(typeof previousViewId == 'undefined') previousViewId = '';
  40. if(typeof viewId == 'undefined') viewId = '';
  41. if (viewId == previousViewId) {
  42. if(forceSwitchTo) $ax.postAdaptiveViewChanged(forceSwitchTo);
  43. return;
  44. }
  45. $ax('*').each(function(obj, elementId) {
  46. if (!$ax.public.fn.IsTreeNodeObject(obj.type)) return;
  47. if(!obj.hasOwnProperty('isExpanded')) return;
  48. var query = $ax('#' + elementId);
  49. var defaultExpanded = obj.isExpanded;
  50. query.expanded(defaultExpanded);
  51. });
  52. // reset all the inline positioning from move and rotate actions including size and transformation
  53. $axure('*').each(function (diagramObject, elementId) {
  54. if(diagramObject.isContained) return;
  55. if($ax.getParentRepeaterFromElementIdExcludeSelf(elementId)) return;
  56. var element = document.getElementById(elementId);
  57. if(element) {
  58. var resetCss = {
  59. top: "", left: "", width: "", height: "", opacity: "",
  60. transform: "", webkitTransform: "", MozTransform: "", msTransform: "", OTransform: ""
  61. };
  62. var query = $(element);
  63. query.css(resetCss);
  64. var isPanel = $ax.public.fn.IsDynamicPanel(diagramObject.type);
  65. if(!isPanel || diagramObject.fitToContent) { //keeps size on the panel states when switching adaptive views to optimize fit to panel
  66. if(diagramObject.fitToContent) $ax.dynamicPanelManager.setFitToContentCss(elementId, true);
  67. var children = query.children();
  68. if(children.length) children.css(resetCss);
  69. }
  70. $ax.dynamicPanelManager.resetFixedPanel(diagramObject, element);
  71. $ax.dynamicPanelManager.resetAdaptivePercentPanel(diagramObject, element);
  72. }
  73. });
  74. $ax.adaptive.currentViewId = viewId; // we need to set this so the enabled and selected styles will apply properly
  75. if(previousViewId) {
  76. $ax.style.clearAdaptiveStyles();
  77. $('*').removeClass(previousViewId);
  78. } else {
  79. $ax.style.reselectElements();
  80. }
  81. $axure('*').each(function (obj, elementId) {
  82. if($ax.getParentRepeaterFromElementIdExcludeSelf(elementId)) return;
  83. $ax.style.updateElementIdImageStyle(elementId); // When image override exists, fix styling/borders
  84. });
  85. //$ax.style.startSuspendTextAlignment();
  86. $ax.style.disableStateTransitions();
  87. // reset all the images only if we're going back to the default view
  88. if(!viewId) {
  89. $axure('*').each(function (diagramObject, elementId) {
  90. if($ax.getParentRepeaterFromElementIdExcludeSelf(elementId)) return;
  91. $ax.placeholderManager.refreshPlaceholder(elementId);
  92. var images = diagramObject.images;
  93. if(diagramObject.type == 'horizontalLine' || diagramObject.type == 'verticalLine') {
  94. var startImg = images['start~'];
  95. _setLineImage(elementId + "_start", startImg);
  96. var endImg = images['end~'];
  97. _setLineImage(elementId + "_end", endImg);
  98. var lineImg = images['line~'];
  99. _setLineImage(elementId + "_line", lineImg);
  100. } else if(diagramObject.type == $ax.constants.CONNECTOR_TYPE) {
  101. _setAdaptiveConnectorImages(elementId, images, '');
  102. } else if(images) {
  103. $ax.style.updateImage(elementId);
  104. }
  105. //align all text
  106. var child = $jobj(elementId).children('.text');
  107. if(child.length) $ax.style.transformTextWithVerticalAlignment(child[0].id, function() { });
  108. });
  109. // we have to reset visibility if we aren't applying a new view
  110. $ax.visibility.resetLimboAndHiddenToDefaults();
  111. $ax.visibility.clearMovedAndResized();
  112. $ax.repeater.refreshAllRepeaters();
  113. $ax.dynamicPanelManager.updateParentsOfNonDefaultFitPanels();
  114. $ax.dynamicPanelManager.updatePercentPanelCache($ax('*'));
  115. $ax.expr.updateAutoFitted();
  116. } else {
  117. $ax.visibility.clearLimboAndHidden();
  118. $ax.visibility.clearMovedAndResized();
  119. _applyView(viewId);
  120. $ax.repeater.refreshAllRepeaters();
  121. $ax.dynamicPanelManager.updateAllLayerSizeCaches();
  122. $ax.dynamicPanelManager.updateParentsOfNonDefaultFitPanels();
  123. $ax.expr.updateAutoFitted();
  124. }
  125. $ax.annotation.updateAllFootnotes();
  126. //$ax.style.resumeSuspendTextAlignment();
  127. $ax.adaptive.triggerEvent('viewChanged', {});
  128. if(_loadFinished) $ax.viewChangePageAndMasters(forceSwitchTo);
  129. };
  130. var _getImageWithTag = function(image, tag) {
  131. var flattened = {};
  132. for (var component in image) {
  133. var componentImage = image[component][tag];
  134. if(componentImage) flattened[component] = componentImage;
  135. }
  136. return flattened;
  137. }
  138. // gets the inheritance chain of a particular view.
  139. var _getAdaptiveIdChain = $ax.adaptive.getAdaptiveIdChain = function(viewId) {
  140. if(!viewId) return [];
  141. var view = _idToView[viewId];
  142. var chain = [];
  143. var current = view;
  144. while(current) {
  145. chain[chain.length] = current.id;
  146. current = _idToView[current.baseViewId];
  147. }
  148. return chain.reverse();
  149. };
  150. var _getMasterAdaptiveIdChain = $ax.adaptive.getMasterAdaptiveIdChain = function (masterId, viewId) {
  151. if (!viewId) return [];
  152. var master = $ax.pageData.masters[masterId];
  153. var masterViews = master.adaptiveViews;
  154. var idToMasterView = {};
  155. if (masterViews && masterViews.length > 0) {
  156. for (var i = 0; i < masterViews.length; i++) {
  157. var view = masterViews[i];
  158. idToMasterView[view.id] = view;
  159. }
  160. }
  161. if (!idToMasterView) return [];
  162. var view = idToMasterView[viewId];
  163. var chain = [];
  164. var current = view;
  165. while (current) {
  166. chain[chain.length] = current.id;
  167. current = idToMasterView[current.baseViewId];
  168. }
  169. return chain.reverse();
  170. };
  171. var _getPageStyle = $ax.adaptive.getPageStyle = function() {
  172. var currentViewId = $ax.adaptive.currentViewId;
  173. var adaptiveChain = _getAdaptiveIdChain(currentViewId);
  174. var currentStyle = $.extend({}, $ax.pageData.page.style);
  175. for(var i = 0; i < adaptiveChain.length; i++) {
  176. var viewId = adaptiveChain[i];
  177. $.extend(currentStyle, $ax.pageData.page.adaptiveStyles[viewId]);
  178. }
  179. return currentStyle;
  180. };
  181. var _setAdaptiveLineImages = function(elementId, images, viewIdChain) {
  182. for(var i = viewIdChain.length - 1; i >= 0; i--) {
  183. var viewId = viewIdChain[i];
  184. var startImg = images['start~' + viewId];
  185. if(startImg) {
  186. _setLineImage(elementId + "_start", startImg);
  187. var endImg = images['end~' + viewId];
  188. _setLineImage(elementId + "_end", endImg);
  189. var lineImg = images['line~' + viewId];
  190. _setLineImage(elementId + "_line", lineImg);
  191. break;
  192. }
  193. }
  194. };
  195. var _setAdaptiveConnectorImages = function (elementId, images, view) {
  196. var conn = $jobj(elementId);
  197. var count = conn.children().length-1; // -1 for rich text panel
  198. for(var i = 0; i < count; i++) {
  199. var img = images['' + i + '~' + view];
  200. $jobj(elementId + '_seg' + i).attr('src', img);
  201. }
  202. };
  203. var _applyView = $ax.adaptive.applyView = function(viewId, query) {
  204. var limboIds = {};
  205. var hiddenIds = {};
  206. var jquery;
  207. if(query) {
  208. jquery = query.jQuery();
  209. jquery = jquery.add(jquery.find('*'));
  210. var jqueryAnn = $ax.annotation.jQueryAnn(query);
  211. jquery = jquery.add(jqueryAnn);
  212. } else {
  213. jquery = $('*').not('#ios-safari-fixed');
  214. query = $ax('*');
  215. }
  216. jquery.addClass(viewId);
  217. var viewIdChain = _getAdaptiveIdChain(viewId);
  218. // this could be made more efficient by computing it only once per object
  219. query.each(function(diagramObject, elementId) {
  220. _applyAdaptiveViewOnObject(diagramObject, elementId, viewIdChain, viewId, limboIds, hiddenIds);
  221. });
  222. $ax.visibility.addLimboAndHiddenIds(limboIds, hiddenIds, query);
  223. //$ax.dynamicPanelManager.updateAllFitPanelsAndLayerSizeCaches();
  224. $ax.dynamicPanelManager.updatePercentPanelCache(query);
  225. };
  226. var _applyAdaptiveViewOnObject = function(diagramObject, elementId, viewIdChain, viewId, limboIds, hiddenIds) {
  227. var adaptiveChain = [];
  228. for(var i = 0; i < viewIdChain.length; i++) {
  229. var viewId = viewIdChain[i];
  230. var viewStyle = diagramObject.adaptiveStyles[viewId];
  231. if(viewStyle) {
  232. adaptiveChain[adaptiveChain.length] = viewStyle;
  233. if (viewStyle.size) $ax.public.fn.convertToSingleImage($jobj(elementId));
  234. }
  235. }
  236. var state = $ax.style.generateState(elementId);
  237. // set the image
  238. var images = diagramObject.images;
  239. if(images) {
  240. if(diagramObject.type == 'horizontalLine' || diagramObject.type == 'verticalLine') {
  241. _setAdaptiveLineImages(elementId, images, viewIdChain);
  242. } else if (diagramObject.type == $ax.constants.CONNECTOR_TYPE) {
  243. _setAdaptiveConnectorImages(elementId, images, viewId);
  244. } else if (diagramObject.generateCompound) {
  245. var compoundUrl = _matchImageCompound(diagramObject, elementId, viewIdChain, state);
  246. if (compoundUrl) $ax.style.applyImage(elementId, compoundUrl, state);
  247. }else {
  248. var imgUrl = _matchImage(elementId, images, viewIdChain, state);
  249. if(imgUrl) $ax.style.applyImage(elementId, imgUrl, state);
  250. }
  251. }
  252. // addaptive override style (not including default style props)
  253. var adaptiveStyle = $ax.style.computeAllOverrides(elementId, undefined, state, viewId);
  254. // this style INCLUDES the object's my style
  255. var compoundStyle = $.extend({}, diagramObject.style, adaptiveStyle);
  256. // if (diagramObject.owner.type == 'Axure:Master' && diagramObject.adaptiveStyles) {
  257. // adaptiveStyle = $ax.style.computeFullStyle(elementId, state, viewId);
  258. // }
  259. if(!diagramObject.isContained) {
  260. $ax.style.setAdaptiveStyle(elementId, adaptiveStyle, state);
  261. }
  262. var scriptId = $ax.repeater.getScriptIdFromElementId(elementId);
  263. if(compoundStyle.limbo && !diagramObject.isContained) limboIds[scriptId] = true;
  264. // sigh, javascript. we need the === here because undefined means not overriden
  265. if(compoundStyle.visible === false) hiddenIds[scriptId] = true;
  266. };
  267. var _matchImage = function (id, images, viewIdChain, state, doNotDecomposeState) {
  268. const overrideState = $ax.style.highestPriorityBaseState(state);
  269. const override = $ax.style.getElementImageOverride(id, overrideState);
  270. if(override) return override;
  271. if(!images) return undefined;
  272. const scriptId = $ax.repeater.getScriptIdFromElementId(id);
  273. // first check all the images for this state
  274. for(let i = viewIdChain.length - 1; i >= 0; i--) {
  275. const viewId = viewIdChain[i];
  276. const img = findImage(images, scriptId, state, viewId);
  277. if (img) return img;
  278. }
  279. // check for the default state style
  280. // try to find an image for the default state or for the highest priority state if no default was found. RP-1854
  281. const defaultStateImage = findImage(images, scriptId, state) || findImage(images, scriptId, overrideState);
  282. if (defaultStateImage) return defaultStateImage;
  283. if(doNotDecomposeState) return undefined;
  284. state = $ax.style.decomposeState(state);
  285. if (state) return _matchImage(scriptId, images, viewIdChain, state);
  286. // SHOULD NOT REACH HERE! NORMAL SHOULD ALWAYS CATCH AT THE DEFAULT!
  287. return images['normal~']; // this is the default
  288. };
  289. let findImage = function(images, scriptId, state, viewId) {
  290. if(!images) return undefined;
  291. if(!viewId) viewId = "";
  292. let withScript = scriptId + "~" + state + "~" + viewId;
  293. let img = images[withScript];
  294. if(!img) img = images[state + "~" + viewId];
  295. return img;
  296. }
  297. var _matchImageCompound = function(diagramObject, id, viewIdChain, state) {
  298. var images = [];
  299. for(var i = 0; i < diagramObject.compoundChildren.length; i++) {
  300. var component = diagramObject.compoundChildren[i];
  301. images[component] = _matchImage(id, diagramObject.images[component], viewIdChain, state);
  302. }
  303. return images;
  304. };
  305. $ax.adaptive.getImageForStateAndView = function(id, state) {
  306. var viewIdChain = _getAdaptiveIdChain($ax.adaptive.currentViewId);
  307. var diagramObject = $ax.getObjectFromElementId(id);
  308. if (diagramObject.generateCompound) return _matchImageCompound(diagramObject, id, viewIdChain, state);
  309. else return _matchImage(id, diagramObject.images, viewIdChain, state);
  310. };
  311. var _getAdaptiveView = function(winWidth, winHeight) {
  312. var _isViewOneGreaterThanTwo = function (view1, view2, winHeight) {
  313. if (view1.size.width > view2.size.width) return true;
  314. if (view1.size.width == view2.size.width) {
  315. if (view2.size.height <= winHeight) return view1.size.height > view2.size.height && view1.size.height <= winHeight;
  316. else return view1.size.height < view2.size.height;
  317. }
  318. return false;
  319. };
  320. var _isViewOneLessThanTwo = function(view1, view2) {
  321. var width2 = view2.size.width || 1000000; // artificially large number
  322. var height2 = view2.size.height || 1000000;
  323. var width1 = view1.size.width || 1000000;
  324. var height1 = view1.size.height || 1000000;
  325. return width1 < width2 || (width1 == width2 && height1 < height2);
  326. };
  327. var _isWindowWidthGreaterThanViewWidth = function(view, width) {
  328. return width >= view.size.width;
  329. };
  330. var _isWindowWidthLessThanViewWidth = function(view1, width) {
  331. var viewWidth = view1.size.width || 1000000;
  332. return width <= viewWidth;
  333. };
  334. var greater = undefined;
  335. var less = undefined;
  336. var defaultView = $ax.pageData.defaultAdaptiveView;
  337. if (_isWindowWidthGreaterThanViewWidth(defaultView, winWidth, winHeight)) greater = defaultView;
  338. less = defaultView;
  339. for(var i = 0; i < _enabledViews.length; i++) {
  340. var view = _enabledViews[i];
  341. if(_isWindowWidthGreaterThanViewWidth(view, winWidth, winHeight)) {
  342. if(!greater || _isViewOneGreaterThanTwo(view, greater, winHeight)) greater = view;
  343. }
  344. if(_isWindowWidthLessThanViewWidth(view, winWidth, winHeight)) {
  345. if(!less || _isViewOneLessThanTwo(view, less)) less = view;
  346. }
  347. }
  348. return greater || less;
  349. };
  350. var _isAdaptiveInitialized = function() {
  351. return typeof _idToView != 'undefined';
  352. };
  353. $ax.messageCenter.addMessageListener(function(message, data) {
  354. //If the adaptive plugin hasn't been initialized yet then
  355. //save the view to load so that it can get set when initialize occurs
  356. if (message == 'switchAdaptiveView') {
  357. if (!$axure.utils.isInPlayer()) return;
  358. var href = decodeURI(window.location.href.split('?')[0]);
  359. var lastSlash = href.lastIndexOf('/');
  360. href = href.substring(lastSlash + 1);
  361. if(href != data.src) return;
  362. var view = data.view == 'auto' ? undefined : (data.view == 'default' ? '' : data.view);
  363. if(!_isAdaptiveInitialized()) {
  364. _initialViewToLoad = view;
  365. } else _handleLoadViewId(view);
  366. } else if (message == 'setAdaptiveViewForSize') {
  367. if (!$axure.utils.isInPlayer()) return;
  368. _autoIsHandledBySidebar = true;
  369. if(!_isAdaptiveInitialized()) {
  370. _initialViewSizeToLoad = data;
  371. } else _handleSetViewForSize(data.width, data.height);
  372. } else if (message == 'getScale') {
  373. if (!$axure.utils.isInPlayer()) return;
  374. var prevScaleN = data.prevScaleN;
  375. var newScaleN = 1;
  376. var contentOriginOffset = 0;
  377. var $body = $('body');
  378. $body.css('height', '');
  379. if (data.scale != 0 && data.scale != 3) {
  380. var adjustScrollScale = false;
  381. if ($('html').getNiceScroll().length == 0 && !MOBILE_DEVICE) {
  382. //adding nicescroll so width is correct when getting scale
  383. _addNiceScroll($('html'), { emulatetouch: false, horizrailenabled: false, spacebarenabled: false }, true);
  384. adjustScrollScale = true;
  385. }
  386. $('html').css('overflow-x', 'hidden');
  387. var view = $ax.adaptive.currentViewId ? _idToView[$ax.adaptive.currentViewId] : $ax.pageData.defaultAdaptiveView;
  388. var bodyWidth = view.size.width;
  389. // screen width does not adjust on screen rotation for iOS (width is always shorter screen measurement)
  390. var isLandscape = window.orientation != 0 && window.orientation != 180;
  391. var mobileWidth = (IOS ? (isLandscape ? window.screen.height : window.screen.width) : window.screen.width) - data.panelWidthOffset;
  392. var scaleN = newScaleN = (MOBILE_DEVICE ? mobileWidth : data.mainFrameWidth) / bodyWidth;
  393. if (data.scale == 2) {
  394. var pageSize = $ax.public.fn.getPageSize();
  395. var hScaleN = (MOBILE_DEVICE ? data.viewportHeight : data.mainFrameHeight) / Math.max(1, pageSize.bottom);
  396. if (hScaleN < scaleN) {
  397. scaleN = newScaleN = hScaleN;
  398. }
  399. var isCentered = $body.css('position') == 'relative';
  400. if (isCentered) contentOriginOffset = scaleN * (bodyWidth / 2);
  401. }
  402. if ((SAFARI && IOS) || SHARE_APP) {
  403. var pageSize = $ax.public.fn.getPageSize();
  404. $body.first().css('height', pageSize.bottom + 'px');
  405. } //else $body.css('height', $body.height() + 'px');
  406. if (adjustScrollScale) {
  407. _removeNiceScroll($('html'), true);
  408. _addNiceScroll($('html'), { emulatetouch: false, horizrailenabled: false, spacebarenabled: false, cursorwidth: Math.ceil(6 / newScaleN) + 'px', cursorborder: 1 / newScaleN + 'px solid #fff', cursorborderradius: 5 / newScaleN + 'px' }, true);
  409. }
  410. } else {
  411. if (data.scale == 0) {
  412. scaleN = newScaleN = 1;
  413. }
  414. if (data.scale == 3) {
  415. const zoom = $(document).find("html").attr("zoom") ? parseInt($(document).find("html").attr("zoom"),10) : 100;
  416. scaleN = newScaleN = zoom/100;
  417. }
  418. }
  419. var contentScale = {
  420. scaleN: newScaleN,
  421. prevScaleN: prevScaleN,
  422. contentOriginOffset: contentOriginOffset,
  423. clipToView: data.clipToView,
  424. mainFrameHeight: data.mainFrameHeight,
  425. mainFrameWidth: data.mainFrameWidth,
  426. viewportHeight: data.viewportHeight,
  427. viewportWidth: data.viewportWidth,
  428. panelWidthOffset: data.panelWidthOffset,
  429. scale: data.scale
  430. };
  431. $axure.messageCenter.postMessage('setContentScale', contentScale);
  432. } else if (message == 'setDeviceMode') {
  433. if (!$axure.utils.isInPlayer()) return;
  434. _isDeviceMode = data.device;
  435. if (data.device) {
  436. // FIXES firefox cursor not staying outside initial device frame border
  437. // SAFARI needs entire content height so that trackpad can be disabled
  438. //if (FIREFOX || (SAFARI && !IOS)) {
  439. // var pageSize = $ax.public.fn.getPageSize();
  440. // $('html').css('height', pageSize.bottom + 'px');
  441. //}
  442. _removeNiceScroll($('html'), true);
  443. if (!MOBILE_DEVICE) {
  444. _addNiceScroll($('html'), { emulatetouch: true, horizrailenabled: false, spacebarenabled: false }, true);
  445. if (data.cursor === 0) {
  446. $('html').css('cursor', 'default');
  447. } else {
  448. $('html').addClass('mobileFrameCursor');
  449. $('html').css('cursor', 'url(resources/css/images/touch.cur), auto');
  450. $('html').css('cursor', 'url(resources/css/images/touch.svg) 16 16, auto');
  451. }
  452. $('html').css('overflow-x', 'hidden');
  453. if (IE) {
  454. document.addEventListener("click", function () {
  455. // IE still sometimes wants an argument here
  456. this.activeElement.releasePointerCapture();
  457. }, false);
  458. }
  459. if ($axure.browser.isEdge) {
  460. document.addEventListener("pointerdown", function (e) {
  461. this.activeElement.releasePointerCapture(e.pointerId);
  462. }, false);
  463. }
  464. $ax.dynamicPanelManager.initMobileScroll();
  465. }
  466. // Gives horizontal scroll to android in 100% (handled outside of iframe)
  467. $('html').css('overflow-x', 'hidden');
  468. $('body').css('margin', '0px');
  469. $(function () { _setHorizontalScroll(false); });
  470. } else {
  471. _removeNiceScroll($('html'), true);
  472. const zoom = $(document).find("html").attr("zoom") ? parseInt($(document).find("html").attr("zoom"),10) : 100;
  473. if (zoom == 100){
  474. $('html').css('overflow-x', '');
  475. }
  476. $('html').css('cursor', '');
  477. //$('html').removeAttr('style');
  478. $('body').css('margin', '');
  479. $('html').removeClass('mobileFrameCursor');
  480. $(function () { _setHorizontalScroll(!data.scaleToWidth); });
  481. $ax.dynamicPanelManager.initMobileScroll();
  482. }
  483. }
  484. });
  485. var _isDeviceMode = false;
  486. $ax.adaptive.isDeviceMode = function () {
  487. return _isDeviceMode;
  488. }
  489. var _isHtmlQuery = function ($container) { return $container.length > 0 && $container[0] == $('html')[0]; }
  490. var _removeNiceScroll = $ax.adaptive.removeNiceScroll = function ($container, blockResetScroll) {
  491. if (!blockResetScroll) {
  492. $container.scrollLeft(0);
  493. $container.scrollTop(0);
  494. }
  495. var nS = $container.getNiceScroll();
  496. var emulateTouch = nS.length > 0 && nS[0].opt.emulateTouch;
  497. nS.remove();
  498. //clean up nicescroll css
  499. $container.css({ 'overflow': '' });
  500. if (IE) $container.css({ '-ms-overflow-y': '', 'overflow-y': '', '-ms-overflow-style': '', '-ms-touch-action': '' });
  501. if (!emulateTouch) return;
  502. if (_isHtmlQuery($container)) {
  503. $('.scrollContainer').remove();
  504. $('#base').off('mouseleave.ax');
  505. } else {
  506. $container.off('mouseleave.ax');
  507. }
  508. }
  509. var _addNiceScrollExitDetector = function ($container) {
  510. if (_isHtmlQuery($container)) {
  511. var isScrollContainerExist = $('.scrollContainer').length > 0;
  512. // add a fixed div the size of the frame that will not move as we scroll like html,body,#base,children
  513. // so we are able to detect when the mouse leaves that frame area if there is no existing DOM element
  514. var $scrollContainer = isScrollContainerExist ? $('.scrollContainer') : $("<div class='scrollContainer'></div>");
  515. var $body = $('body');
  516. $scrollContainer.css({
  517. 'position': 'fixed',
  518. 'width': $body.width(),
  519. 'height': $body.height()
  520. });
  521. // we want #base div to handle the event so that it bubbles up from the scrollContainer div which
  522. // handles the bounds of the frame in case there was no previously exisiting child to bubble up the
  523. // event or if the user has clicked on an existing child node to start the emulated touch scroll
  524. var $base = $('#base');
  525. $base.on('mouseleave.ax', function (e) {
  526. var nS = $container.getNiceScroll();
  527. for (var i = 0; i < nS.length; ++i)
  528. nS[i].ontouchend(e);
  529. });
  530. // need to prepend so it is first child in DOM and doesn't block mouse events to other children which
  531. // would make them unable to scroll
  532. if (!isScrollContainerExist){
  533. $base.prepend($scrollContainer);
  534. }
  535. } else {
  536. $container.on('mouseleave.ax', function (e) {
  537. var nS = $container.getNiceScroll();
  538. for (var i = 0; i < nS.length; ++i)
  539. nS[i].ontouchend(e);
  540. });
  541. }
  542. }
  543. var _addNiceScroll = $ax.adaptive.addNiceScroll = function ($container, options, blockResetScroll) {
  544. if (!blockResetScroll) {
  545. $container.scrollLeft(0);
  546. $container.scrollTop(0);
  547. }
  548. $container.niceScroll(options);
  549. // RP-581 add handling to stop scroll on mouse leave if enable cursor-drag scrolling like touch devices in desktop computer
  550. if (options.emulatetouch) _addNiceScrollExitDetector($container);
  551. //clean up nicescroll css so child scroll containers show scrollbars in IE
  552. if (IE) $container.css({ '-ms-overflow-y': '', '-ms-overflow-style': '' });
  553. if(IOS) $container.css({ 'overflow-y': ''});
  554. }
  555. //given the element, find the container that's using nice scroll (including the element itself)
  556. $ax.adaptive.getNiceScrollContainer = function(element) {
  557. var parent = element;
  558. while(parent) {
  559. if($(parent).getNiceScroll().length > 0) return parent;
  560. parent = parent.parentElement;
  561. }
  562. return undefined;
  563. }
  564. $ax.adaptive.updateMobileScrollOnBody = function () {
  565. var niceScroll = $('html').getNiceScroll();
  566. if (niceScroll.length == 0) return;
  567. niceScroll.resize();
  568. }
  569. var _setTrackpadHorizontalScroll = function (active) {
  570. var preventScroll = function (e) {
  571. if (Math.abs(e.wheelDeltaX) != 0) {
  572. e.preventDefault();
  573. }
  574. }
  575. if (!active) {
  576. document.body.addEventListener("mousewheel", preventScroll, { passive: false });
  577. document.getElementById('html').addEventListener("mousewheel", preventScroll, { passive: false });
  578. } else {
  579. document.body.removeEventListener("mousewheel", preventScroll, { passive: false });
  580. document.getElementById('html').removeEventListener("mousewheel", preventScroll, { passive: false });
  581. }
  582. }
  583. var _setHorizontalScroll = function (active) {
  584. var $body = $(document);
  585. if (!active) {
  586. $body.bind('scroll', function () {
  587. if ($body.scrollLeft() !== 0) {
  588. $body.scrollLeft(0);
  589. }
  590. });
  591. } else {
  592. $body.unbind('scroll');
  593. }
  594. }
  595. $ax.adaptive.setAdaptiveView = function(view) {
  596. var viewIdForSitemapToUnderstand = view == 'auto' ? undefined : (view == 'default' ? '' : view);
  597. if(!_isAdaptiveInitialized()) {
  598. _initialViewToLoad = viewIdForSitemapToUnderstand;
  599. } else _handleLoadViewId(viewIdForSitemapToUnderstand);
  600. };
  601. $ax.adaptive.initialize = function() {
  602. _views = $ax.pageData.adaptiveViews;
  603. _idToView = {};
  604. var useViews = $ax.document.configuration.useViews;
  605. if(_views && _views.length > 0) {
  606. for(var i = 0; i < _views.length; i++) {
  607. var view = _views[i];
  608. _idToView[view.id] = view;
  609. if(useViews) _enabledViews[_enabledViews.length] = view;
  610. }
  611. if(_autoIsHandledBySidebar && _initialViewSizeToLoad) _handleSetViewForSize(_initialViewSizeToLoad.width, _initialViewSizeToLoad.height);
  612. else _handleLoadViewId(_initialViewToLoad);
  613. }
  614. $axure.resize(function(e) {
  615. _handleResize();
  616. $ax.postResize(e); //window resize fires after view changed
  617. });
  618. };
  619. var _handleLoadViewId = function (loadViewId, forceSwitchTo) {
  620. if(typeof loadViewId != 'undefined') {
  621. _setAuto(false);
  622. _switchView(loadViewId != 'default' ? loadViewId : '', forceSwitchTo);
  623. } else {
  624. _setAuto(true);
  625. _handleResize(forceSwitchTo);
  626. }
  627. };
  628. var _handleSetViewForSize = function (width, height) {
  629. var toView = _getAdaptiveView(width, height);
  630. var toViewId = toView && toView.id;
  631. _switchView(toViewId, "auto");
  632. };
  633. $ax.adaptive.getSketchKey = function() {
  634. return $ax.pageData.sketchKeys[$ax.adaptive.currentViewId || ''];
  635. }
  636. });