adaptive.js 21 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507
  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. var imageQuery = $jobj(id).attr('src', imageUrl);
  35. if(imageUrl.indexOf(".png") > -1) $ax.utils.fixPng(imageQuery[0]);
  36. };
  37. var _switchView = function (viewId, forceSwitchTo) {
  38. if(!$ax.pageData.isAdaptiveEnabled) return;
  39. var previousViewId = $ax.adaptive.currentViewId;
  40. if(typeof previousViewId == 'undefined') previousViewId = '';
  41. if(typeof viewId == 'undefined') viewId = '';
  42. if (viewId == previousViewId) {
  43. if(forceSwitchTo) $ax.postAdaptiveViewChanged(forceSwitchTo);
  44. return;
  45. }
  46. $ax('*').each(function(obj, elementId) {
  47. if (!$ax.public.fn.IsTreeNodeObject(obj.type)) return;
  48. if(!obj.hasOwnProperty('isExpanded')) return;
  49. var query = $ax('#' + elementId);
  50. var defaultExpanded = obj.isExpanded;
  51. query.expanded(defaultExpanded);
  52. });
  53. // reset all the positioning on the style tags, including size and transformation
  54. $axure('*').each(function(diagramObject, elementId) {
  55. var element = document.getElementById(elementId);
  56. if(element && !diagramObject.isContained) {
  57. var resetCss = {
  58. top: "", left: "", width: "", height: "", opacity: "",
  59. transform: "", webkitTransform: "", MozTransform: "", msTransform: "", OTransform: ""
  60. };
  61. var query = $(element);
  62. var children = query.children();
  63. var sketchyImage = $('#' + $ax.repeater.applySuffixToElementId(elementId, '_image_sketch'));
  64. var textChildren = query.children('div.text');
  65. query.css(resetCss);
  66. if(children) children.css(resetCss);
  67. if(sketchyImage) sketchyImage.css(resetCss);
  68. if(textChildren) textChildren.css(resetCss);
  69. $ax.dynamicPanelManager.resetFixedPanel(diagramObject, element);
  70. $ax.dynamicPanelManager.resetAdaptivePercentPanel(diagramObject, element);
  71. }
  72. });
  73. $ax.adaptive.currentViewId = viewId; // we need to set this so the enabled and selected styles will apply properly
  74. if(previousViewId) {
  75. $ax.style.clearAdaptiveStyles();
  76. $('*').removeClass(previousViewId);
  77. } else {
  78. $ax.style.reselectElements();
  79. }
  80. $axure('*').each(function(obj, elementId) {
  81. $ax.style.updateElementIdImageStyle(elementId); // When image override exists, fix styling/borders
  82. });
  83. // reset all the images only if we're going back to the default view
  84. if(!viewId) {
  85. _updateInputVisibility('', $axure('*'));
  86. $axure('*').each(function(diagramObject, elementId) {
  87. $ax.placeholderManager.refreshPlaceholder(elementId);
  88. var images = diagramObject.images;
  89. if(diagramObject.type == 'horizontalLine' || diagramObject.type == 'verticalLine') {
  90. var startImg = images['start~'];
  91. _setLineImage(elementId + "_start", startImg);
  92. var endImg = images['end~'];
  93. _setLineImage(elementId + "_end", endImg);
  94. var lineImg = images['line~'];
  95. _setLineImage(elementId + "_line", lineImg);
  96. } else if(diagramObject.type == $ax.constants.CONNECTOR_TYPE) {
  97. _setAdaptiveConnectorImages(elementId, images, '');
  98. } else if(images) {
  99. if (diagramObject.generateCompound) {
  100. if($ax.style.IsWidgetDisabled(elementId)) {
  101. disabledImage = _getImageWithTag(images, 'disabled~');
  102. if(disabledImage) $ax.style.applyImage(elementId, disabledImage, 'disabled');
  103. return;
  104. }
  105. if($ax.style.IsWidgetSelected(elementId)) {
  106. selectedImage = _getImageWithTag(images, 'selected~');
  107. if(selectedImage) $ax.style.applyImage(elementId, selectedImage, 'selected');
  108. return;
  109. }
  110. $ax.style.applyImage(elementId, _getImageWithTag(images, 'normal~'));
  111. } else {
  112. if ($ax.style.IsWidgetDisabled(elementId)) {
  113. var disabledImage = $ax.style.getElementImageOverride(elementId, 'disabled') || images['disabled~'];
  114. if (disabledImage) $ax.style.applyImage(elementId, disabledImage, 'disabled');
  115. return;
  116. }
  117. if ($ax.style.IsWidgetSelected(elementId)) {
  118. var selectedImage = $ax.style.getElementImageOverride(elementId, 'selected') || images['selected~'];
  119. if (selectedImage) $ax.style.applyImage(elementId, selectedImage, 'selected');
  120. return;
  121. }
  122. $ax.style.applyImage(elementId, $ax.style.getElementImageOverride(elementId, 'normal') || images['normal~']);
  123. }
  124. }
  125. var child = $jobj(elementId).children('.text');
  126. if(child.length) $ax.style.transformTextWithVerticalAlignment(child[0].id, function() { });
  127. });
  128. // we have to reset visibility if we aren't applying a new view
  129. $ax.visibility.resetLimboAndHiddenToDefaults();
  130. $ax.repeater.refreshAllRepeaters();
  131. $ax.dynamicPanelManager.updateAllFitPanels();
  132. $ax.dynamicPanelManager.updatePercentPanelCache($ax('*'));
  133. } else {
  134. $ax.visibility.clearLimboAndHidden();
  135. _applyView(viewId);
  136. $ax.repeater.refreshAllRepeaters();
  137. }
  138. $ax.adaptive.triggerEvent('viewChanged', {});
  139. if(_loadFinished) $ax.viewChangePageAndMasters(forceSwitchTo);
  140. };
  141. var _getImageWithTag = function(image, tag) {
  142. var flattened = {};
  143. for (var component in image) {
  144. var componentImage = image[component][tag];
  145. if(componentImage) flattened[component] = componentImage;
  146. }
  147. return flattened;
  148. }
  149. // gets if input is hidden due to sketch
  150. var BORDER_WIDTH = "borderWidth";
  151. var COLOR_STYLE = "colorStyle";
  152. var SKETCH_FACTOR = "sketchFactor";
  153. var _areInputsHidden = function(viewId) {
  154. var chain = _getAdaptiveIdChain(viewId);
  155. var page = $ax.pageData.page;
  156. var adaptiveStyles = page.adaptiveStyles;
  157. // keep track of props that are not sketchy, as you continue to climb up your parents;
  158. var notSketch = [];
  159. for(var i = chain.length - 1; i >= -1; i--) {
  160. var style = i == -1 ? page.style : adaptiveStyles[chain[i]];
  161. if(notSketch.indexOf(BORDER_WIDTH) == -1 && style.hasOwnProperty(BORDER_WIDTH)) {
  162. if(style[BORDER_WIDTH] != 0) return true;
  163. notSketch.push(BORDER_WIDTH);
  164. }
  165. if(notSketch.indexOf(COLOR_STYLE) == -1 && style.hasOwnProperty(COLOR_STYLE)) {
  166. if(style[COLOR_STYLE] != 'appliedColor') return true;
  167. notSketch.push(COLOR_STYLE);
  168. }
  169. if(notSketch.indexOf(SKETCH_FACTOR) == -1 && style.hasOwnProperty(SKETCH_FACTOR)) {
  170. if(style[SKETCH_FACTOR] != 0) return true;
  171. notSketch.push(SKETCH_FACTOR);
  172. }
  173. }
  174. return false;
  175. };
  176. var _updateInputVisibility = function(viewId, query) {
  177. var func = _areInputsHidden(viewId) ? 'addClass' : 'removeClass';
  178. query.each(function(obj, elementId) {
  179. var input = $jobj($ax.repeater.applySuffixToElementId(elementId, '_input'));
  180. if(input.length == 0) return;
  181. input[func]('form_sketch');
  182. });
  183. };
  184. // gets the inheritance chain of a particular view.
  185. var _getAdaptiveIdChain = $ax.adaptive.getAdaptiveIdChain = function(viewId) {
  186. if(!viewId) return [];
  187. var view = _idToView[viewId];
  188. var chain = [];
  189. var current = view;
  190. while(current) {
  191. chain[chain.length] = current.id;
  192. current = _idToView[current.baseViewId];
  193. }
  194. return chain.reverse();
  195. };
  196. var _getPageStyle = $ax.adaptive.getPageStyle = function() {
  197. var currentViewId = $ax.adaptive.currentViewId;
  198. var adaptiveChain = _getAdaptiveIdChain(currentViewId);
  199. var currentStyle = $.extend({}, $ax.pageData.page.style);
  200. for(var i = 0; i < adaptiveChain.length; i++) {
  201. var viewId = adaptiveChain[i];
  202. $.extend(currentStyle, $ax.pageData.page.adaptiveStyles[viewId]);
  203. }
  204. return currentStyle;
  205. };
  206. var _setAdaptiveLineImages = function(elementId, images, viewIdChain) {
  207. for(var i = viewIdChain.length - 1; i >= 0; i--) {
  208. var viewId = viewIdChain[i];
  209. var startImg = images['start~' + viewId];
  210. if(startImg) {
  211. _setLineImage(elementId + "_start", startImg);
  212. var endImg = images['end~' + viewId];
  213. _setLineImage(elementId + "_end", endImg);
  214. var lineImg = images['line~' + viewId];
  215. _setLineImage(elementId + "_line", lineImg);
  216. break;
  217. }
  218. }
  219. };
  220. var _setAdaptiveConnectorImages = function (elementId, images, view) {
  221. var conn = $jobj(elementId);
  222. var count = conn.children().length-1; // -1 for rich text panel
  223. for(var i = 0; i < count; i++) {
  224. var img = images['' + i + '~' + view];
  225. $jobj(elementId + '_seg' + i).attr('src', img);
  226. }
  227. };
  228. var _applyView = $ax.adaptive.applyView = function(viewId, query) {
  229. var limboIds = {};
  230. var hiddenIds = {};
  231. var jquery;
  232. if(query) {
  233. jquery = query.jQuery();
  234. jquery = jquery.add(jquery.find('*'));
  235. var jqueryAnn = $ax.annotation.jQueryAnn(query);
  236. jquery = jquery.add(jqueryAnn);
  237. } else {
  238. jquery = $('*');
  239. query = $ax('*');
  240. }
  241. jquery.addClass(viewId);
  242. _updateInputVisibility(viewId, query);
  243. var viewIdChain = _getAdaptiveIdChain(viewId);
  244. // this could be made more efficient by computing it only once per object
  245. query.each(function(diagramObject, elementId) {
  246. _applyAdaptiveViewOnObject(diagramObject, elementId, viewIdChain, viewId, limboIds, hiddenIds);
  247. });
  248. $ax.visibility.addLimboAndHiddenIds(limboIds, hiddenIds, query);
  249. $ax.dynamicPanelManager.updateAllFitPanels();
  250. $ax.dynamicPanelManager.updatePercentPanelCache(query);
  251. };
  252. var _applyAdaptiveViewOnObject = function(diagramObject, elementId, viewIdChain, viewId, limboIds, hiddenIds) {
  253. var adaptiveChain = [];
  254. for(var i = 0; i < viewIdChain.length; i++) {
  255. var viewId = viewIdChain[i];
  256. var viewStyle = diagramObject.adaptiveStyles[viewId];
  257. if(viewStyle) {
  258. adaptiveChain[adaptiveChain.length] = viewStyle;
  259. if (viewStyle.size) $ax.public.fn.convertToSingleImage($jobj(elementId));
  260. }
  261. }
  262. var state = $ax.style.generateState(elementId);
  263. // set the image
  264. var images = diagramObject.images;
  265. if(images) {
  266. if(diagramObject.type == 'horizontalLine' || diagramObject.type == 'verticalLine') {
  267. _setAdaptiveLineImages(elementId, images, viewIdChain);
  268. } else if (diagramObject.type == $ax.constants.CONNECTOR_TYPE) {
  269. _setAdaptiveConnectorImages(elementId, images, viewId);
  270. } else if (diagramObject.generateCompound) {
  271. var compoundUrl = _matchImageCompound(diagramObject, elementId, viewIdChain, state);
  272. if (compoundUrl) $ax.style.applyImage(elementId, compoundUrl, state);
  273. }else {
  274. var imgUrl = _matchImage(elementId, images, viewIdChain, state);
  275. if(imgUrl) $ax.style.applyImage(elementId, imgUrl, state);
  276. }
  277. // for(var i = viewIdChain.length - 1; i >= 0; i--) {
  278. // var viewId = viewIdChain[i];
  279. // var imgUrl = $ax.style.getElementImageOverride(elementId, state) || images[state + '~' + viewId] || images['normal~' + viewId];
  280. // if(imgUrl) {
  281. // $ax.style.applyImage(elementId, imgUrl, state);
  282. // break;
  283. // }
  284. // }
  285. // }
  286. }
  287. // addaptive override style (not including default style props)
  288. var adaptiveStyle = $ax.style.computeAllOverrides(elementId, undefined, state, viewId);
  289. // this style INCLUDES the object's my style
  290. var compoundStyle = $.extend({}, diagramObject.style, adaptiveStyle);
  291. //$ax.style.setAdaptiveStyle(elementId, adaptiveStyle);
  292. if(!diagramObject.isContained) {
  293. $ax.style.setAdaptiveStyle(elementId, adaptiveStyle);
  294. }
  295. var scriptId = $ax.repeater.getScriptIdFromElementId(elementId);
  296. if(compoundStyle.limbo && !diagramObject.isContained) limboIds[scriptId] = true;
  297. // sigh, javascript. we need the === here because undefined means not overriden
  298. if(compoundStyle.visible === false) hiddenIds[scriptId] = true;
  299. };
  300. var _matchImage = function(id, images, viewIdChain, state) {
  301. var override = $ax.style.getElementImageOverride(id, state);
  302. if(override) return override;
  303. if(!images) return undefined;
  304. // first check all the images for this state
  305. for(var i = viewIdChain.length - 1; i >= 0; i--) {
  306. var viewId = viewIdChain[i];
  307. var img = images[state + "~" + viewId];
  308. if(img) return img;
  309. }
  310. // check for the default state style
  311. var defaultStateImage = images[state + '~'];
  312. if(defaultStateImage) return defaultStateImage;
  313. state = $ax.style.progessState(state);
  314. if(state) return _matchImage(id, images, viewIdChain, state);
  315. // SHOULD NOT REACH HERE! NORMAL SHOULD ALWAYS CATCH AT THE DEFAULT!
  316. return images['normal~']; // this is the default
  317. };
  318. var _matchImageCompound = function(diagramObject, id, viewIdChain, state) {
  319. var images = [];
  320. for(var i = 0; i < diagramObject.compoundChildren.length; i++) {
  321. var component = diagramObject.compoundChildren[i];
  322. images[component] = _matchImage(id, diagramObject.images[component], viewIdChain, state);
  323. }
  324. return images;
  325. };
  326. $ax.adaptive.getImageForStateAndView = function(id, state) {
  327. var viewIdChain = _getAdaptiveIdChain($ax.adaptive.currentViewId);
  328. var diagramObject = $ax.getObjectFromElementId(id);
  329. if (diagramObject.generateCompound) return _matchImageCompound(diagramObject, id, viewIdChain, state);
  330. else return _matchImage(id, diagramObject.images, viewIdChain, state);
  331. };
  332. var _getAdaptiveView = function(winWidth, winHeight) {
  333. var _isViewOneGreaterThanTwo = function(view1, view2) {
  334. return view1.size.width > view2.size.width || (view1.size.width == view2.size.width && view1.size.height > view2.size.height);
  335. };
  336. var _isViewOneLessThanTwo = function(view1, view2) {
  337. var width2 = view2.size.width || 1000000; // artificially large number
  338. var height2 = view2.size.height || 1000000;
  339. var width1 = view1.size.width || 1000000;
  340. var height1 = view1.size.height || 1000000;
  341. return width1 < width2 || (width1 == width2 && height1 < height2);
  342. };
  343. var _isWindowGreaterThanView = function(view, width, height) {
  344. return width >= view.size.width && height >= view.size.height;
  345. };
  346. var _isWindowLessThanView = function(view1, width, height) {
  347. var viewWidth = view1.size.width || 1000000;
  348. var viewHeight = view1.size.height || 1000000;
  349. return width <= viewWidth && height <= viewHeight;
  350. };
  351. var greater = undefined;
  352. var less = undefined;
  353. for(var i = 0; i < _enabledViews.length; i++) {
  354. var view = _enabledViews[i];
  355. if(view.condition == ">=") {
  356. if(_isWindowGreaterThanView(view, winWidth, winHeight)) {
  357. if(!greater || _isViewOneGreaterThanTwo(view, greater)) greater = view;
  358. }
  359. } else {
  360. if(_isWindowLessThanView(view, winWidth, winHeight)) {
  361. if(!less || _isViewOneLessThanTwo(view, less)) less = view;
  362. }
  363. }
  364. }
  365. return less || greater;
  366. };
  367. var _isAdaptiveInitialized = function() {
  368. return typeof _idToView != 'undefined';
  369. };
  370. $ax.messageCenter.addMessageListener(function(message, data) {
  371. //If the adaptive plugin hasn't been initialized yet then
  372. //save the view to load so that it can get set when initialize occurs
  373. if(message == 'switchAdaptiveView') {
  374. var href = window.location.href.split('#')[0];
  375. var lastSlash = href.lastIndexOf('/');
  376. href = href.substring(lastSlash + 1);
  377. if(href != data.src) return;
  378. var view = data.view == 'auto' ? undefined : (data.view == 'default' ? '' : data.view);
  379. if(!_isAdaptiveInitialized()) {
  380. _initialViewToLoad = view;
  381. } else _handleLoadViewId(view);
  382. } else if(message == 'setAdaptiveViewForSize') {
  383. _autoIsHandledBySidebar = true;
  384. if(!_isAdaptiveInitialized()) {
  385. _initialViewSizeToLoad = data;
  386. } else _handleSetViewForSize(data.width, data.height);
  387. }
  388. });
  389. $ax.adaptive.setAdaptiveView = function(view) {
  390. var viewIdForSitemapToUnderstand = view == 'auto' ? undefined : (view == 'default' ? '' : view);
  391. if(!_isAdaptiveInitialized()) {
  392. _initialViewToLoad = viewIdForSitemapToUnderstand;
  393. } else _handleLoadViewId(viewIdForSitemapToUnderstand);
  394. };
  395. $ax.adaptive.initialize = function() {
  396. _views = $ax.document.adaptiveViews;
  397. _idToView = {};
  398. if(_views && _views.length > 0) {
  399. for(var i = 0; i < _views.length; i++) {
  400. var view = _views[i];
  401. _idToView[view.id] = view;
  402. }
  403. var enabledViewIds = $ax.document.configuration.enabledViewIds;
  404. for(var i = 0; i < enabledViewIds.length; i++) {
  405. _enabledViews[_enabledViews.length] = _idToView[enabledViewIds[i]];
  406. }
  407. if(_autoIsHandledBySidebar && _initialViewSizeToLoad) _handleSetViewForSize(_initialViewSizeToLoad.width, _initialViewSizeToLoad.height);
  408. else _handleLoadViewId(_initialViewToLoad);
  409. }
  410. $axure.resize(function(e) {
  411. _handleResize();
  412. $ax.postResize(e); //window resize fires after view changed
  413. });
  414. };
  415. var _handleLoadViewId = function (loadViewId, forceSwitchTo) {
  416. if(typeof loadViewId != 'undefined') {
  417. _setAuto(false);
  418. _switchView(loadViewId != 'default' ? loadViewId : '', forceSwitchTo);
  419. } else {
  420. _setAuto(true);
  421. _handleResize(forceSwitchTo);
  422. }
  423. };
  424. var _handleSetViewForSize = function (width, height) {
  425. if(!_auto) return;
  426. var toView = _getAdaptiveView(width, height);
  427. var toViewId = toView && toView.id;
  428. _switchView(toViewId);
  429. };
  430. });