style.js 58 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363
  1. $axure.internal(function($ax) {
  2. var _style = {};
  3. $ax.style = _style;
  4. var _disabledWidgets = {};
  5. var _selectedWidgets = {};
  6. // A table to cache the outerHTML of the _rtf elements before the rollover state is applied.
  7. var _originalTextCache = {};
  8. // A table to exclude the normal style from adaptive overrides
  9. var _shapesWithSetRichText = {};
  10. // just a listing of shape ids
  11. var _adaptiveStyledWidgets = {};
  12. var _setLinkStyle = function(id, styleName) {
  13. var parentId = $ax.GetParentIdFromLink(id);
  14. var style = _computeAllOverrides(id, parentId, styleName, $ax.adaptive.currentViewId);
  15. var textId = $ax.GetTextPanelId(parentId);
  16. if(!_originalTextCache[textId]) {
  17. $ax.style.CacheOriginalText(textId);
  18. }
  19. if($.isEmptyObject(style)) return;
  20. var textCache = _originalTextCache[textId].styleCache;
  21. _transformTextWithVerticalAlignment(textId, function() {
  22. var cssProps = _getCssStyleProperties(style);
  23. $('#' + id).find('*').addBack().each(function(index, element) {
  24. element.setAttribute('style', textCache[element.id]);
  25. _applyCssProps(element, cssProps);
  26. });
  27. });
  28. };
  29. var _resetLinkStyle = function(id) {
  30. var textId = $ax.GetTextPanelId($ax.GetParentIdFromLink(id));
  31. var textCache = _originalTextCache[textId].styleCache;
  32. _transformTextWithVerticalAlignment(textId, function() {
  33. $('#' + id).find('*').addBack().each(function(index, element) {
  34. element.style.cssText = textCache[element.id];
  35. });
  36. });
  37. if($ax.event.mouseDownObjectId) {
  38. $ax.style.SetWidgetMouseDown($ax.event.mouseDownObjectId, true);
  39. } else if($ax.event.mouseOverObjectId) {
  40. $ax.style.SetWidgetHover($ax.event.mouseOverObjectId, true);
  41. }
  42. };
  43. $ax.style.SetLinkHover = function(id) {
  44. _setLinkStyle(id, MOUSE_OVER);
  45. };
  46. $ax.style.SetLinkNotHover = function(id) {
  47. _resetLinkStyle(id);
  48. };
  49. $ax.style.SetLinkMouseDown = function(id) {
  50. _setLinkStyle(id, MOUSE_DOWN);
  51. };
  52. $ax.style.SetLinkNotMouseDown = function(id) {
  53. _resetLinkStyle(id);
  54. var style = _computeAllOverrides(id, $ax.event.mouseOverObjectId, MOUSE_OVER, $ax.adaptive.currentViewId);
  55. if(!$.isEmptyObject(style)) $ax.style.SetLinkHover(id);
  56. //we dont do anything here because the widget not mouse down has taken over here
  57. };
  58. var _widgetHasState = function(id, state) {
  59. if($ax.style.getElementImageOverride(id, state)) return true;
  60. var diagramObject = $ax.getObjectFromElementId(id);
  61. //var adaptiveIdChain = $ax.adaptive.getAdaptiveIdChain($ax.adaptive.currentViewId);
  62. var adaptiveIdChain = $ax.style.getViewIdChain($ax.adaptive.currentViewId, id, diagramObject);
  63. for(var i = 0; i < adaptiveIdChain.length; i++) {
  64. var viewId = adaptiveIdChain[i];
  65. var adaptiveStyle = diagramObject.adaptiveStyles[viewId];
  66. if(adaptiveStyle && adaptiveStyle.stateStyles && adaptiveStyle.stateStyles[state]) return true;
  67. }
  68. if(diagramObject.style.stateStyles) {
  69. var stateStyle = diagramObject.style.stateStyles[state];
  70. if(!stateStyle) return false;
  71. return !$.isEmptyObject(stateStyle);
  72. }
  73. return false;
  74. };
  75. // Returns what overrides the hover, or false if nothing.
  76. var _hoverOverride = function(id) {
  77. if($ax.style.IsWidgetDisabled(id)) return DISABLED;
  78. if($ax.style.IsWidgetSelected(id)) return SELECTED;
  79. var obj = $ax.getObjectFromElementId(id);
  80. if(!obj.isContained) return false;
  81. var path = $ax.getPathFromScriptId($ax.repeater.getScriptIdFromElementId(id));
  82. path[path.length - 1] = obj.parent.id;
  83. var itemId = $ax.repeater.getItemIdFromElementId(id);
  84. return _hoverOverride($ax.getElementIdFromPath(path, { itemNum: itemId }));
  85. };
  86. $ax.style.SetWidgetHover = function(id, value) {
  87. var override = _hoverOverride(id);
  88. if(override == DISABLED) return;
  89. if(!_widgetHasState(id, MOUSE_OVER)) return;
  90. var valToSet = value || _isRolloverOverride(id);
  91. var state = _generateMouseState(id, valToSet ? MOUSE_OVER : NORMAL, override == SELECTED);
  92. _applyImageAndTextJson(id, state);
  93. _updateElementIdImageStyle(id, state);
  94. };
  95. var _rolloverOverrides = [];
  96. var _isRolloverOverride = function(id) {
  97. return _rolloverOverrides.indexOf(id) != -1;
  98. };
  99. $ax.style.AddRolloverOverride = function(id) {
  100. if(_isRolloverOverride(id)) return;
  101. _rolloverOverrides[_rolloverOverrides.length] = id;
  102. if($ax.event.mouseOverIds.indexOf(id) == -1) $ax.style.SetWidgetHover(id, true);
  103. };
  104. $ax.style.RemoveRolloverOverride = function(id) {
  105. var index = _rolloverOverrides.indexOf(id);
  106. if(index == -1) return;
  107. $ax.splice(_rolloverOverrides, index, 1);
  108. if($ax.event.mouseOverIds.indexOf(id) == -1) $ax.style.SetWidgetHover(id, false);
  109. };
  110. // function GetWidgetCurrentState(id) {
  111. // if($ax.style.IsWidgetDisabled(id)) return "disabled";
  112. // if($ax.style.IsWidgetSelected(id)) return "selected";
  113. // if($ax.event.mouseOverObjectId == id) return "mouseOver";
  114. // if($ax.event.mouseDownObjectId == id) return "mouseDown";
  115. // return "normal";
  116. // }
  117. $ax.style.ObjHasMouseDown = function(id) {
  118. var obj = $obj(id);
  119. if($ax.style.getElementImageOverride(id, 'mouseDown') || obj.style && obj.style.stateStyles && obj.style.stateStyles.mouseDown) return true;
  120. //var chain = $ax.adaptive.getAdaptiveIdChain($ax.adaptive.currentViewId);
  121. var chain = $ax.style.getViewIdChain($ax.adaptive.currentViewId, id, obj);
  122. for(var i = 0; i < chain.length; i++) {
  123. var style = obj.adaptiveStyles[chain[i]];
  124. if(style && style.stateStyles && style.stateStyles.mouseDown) return true;
  125. }
  126. return false;
  127. };
  128. $ax.style.SetWidgetMouseDown = function(id, value, checkMouseOver) {
  129. if($ax.style.IsWidgetDisabled(id)) return;
  130. if(!_widgetHasState(id, MOUSE_DOWN)) return;
  131. //if set to value is true, it's mousedown, if check mouseover is true,
  132. //check if element is currently mouseover and has mouseover state before setting mouseover
  133. if(value) var state = MOUSE_DOWN;
  134. else if(!checkMouseOver || $ax.event.mouseOverIds.indexOf(id) !== -1 && _widgetHasState(id, MOUSE_OVER)) state = MOUSE_OVER;
  135. else state = NORMAL;
  136. var mouseState = _generateMouseState(id, state, $ax.style.IsWidgetSelected(id));
  137. _applyImageAndTextJson(id, mouseState);
  138. _updateElementIdImageStyle(id, mouseState);
  139. };
  140. var _generateMouseState = function(id, mouseState, selected) {
  141. var isSelectedFocused = function (state) {
  142. if(!_widgetHasState(id, FOCUSED)) return state;
  143. var jObj = $('#' + id);
  144. if(state == SELECTED) return (jObj.hasClass(FOCUSED)) ? SELECTED_FOCUSED : state;
  145. else return (jObj.hasClass(FOCUSED) || jObj.hasClass(SELECTED_FOCUSED)) ? FOCUSED : state;
  146. }
  147. if (selected) {
  148. if (_style.getElementImageOverride(id, SELECTED)) return isSelectedFocused(SELECTED);
  149. var obj = $obj(id);
  150. //var viewChain = $ax.adaptive.getAdaptiveIdChain($ax.adaptive.currentViewId);
  151. var viewChain = $ax.style.getViewIdChain($ax.adaptive.currentViewId, id, obj);
  152. viewChain[viewChain.length] = '';
  153. if($ax.IsDynamicPanel(obj.type) || $ax.IsLayer(obj.type)) return isSelectedFocused(SELECTED);
  154. var any = function(dict) {
  155. for(var key in dict) return true;
  156. return false;
  157. };
  158. for(var i = 0; i < viewChain.length; i++) {
  159. var viewId = viewChain[i];
  160. // Need to check seperately for images.
  161. var scriptId = $ax.repeater.getScriptIdFromElementId(id);
  162. if(obj.adaptiveStyles && obj.adaptiveStyles[viewId] && any(obj.adaptiveStyles[viewId])
  163. || obj.images && (obj.images[scriptId + '~selected~' + viewId] || obj.images['selected~' + viewId])) return isSelectedFocused(SELECTED);
  164. }
  165. var selectedStyle = obj.style && obj.style.stateStyles && obj.style.stateStyles.selected;
  166. if(selectedStyle && any(selectedStyle)) return isSelectedFocused(SELECTED);
  167. }
  168. // Not using selected
  169. return isSelectedFocused(mouseState);
  170. };
  171. $ax.style.SetWidgetFocused = function (id, value) {
  172. if (_isWidgetDisabled(id)) return;
  173. if (!_widgetHasState(id, FOCUSED)) return;
  174. if (value) var state = $ax.style.IsWidgetSelected(id) ? SELECTED_FOCUSED : FOCUSED;
  175. else state = $ax.style.IsWidgetSelected(id) ? SELECTED : NORMAL;
  176. _applyImageAndTextJson(id, state);
  177. _updateElementIdImageStyle(id, state);
  178. }
  179. $ax.style.SetWidgetSelected = function(id, value, alwaysApply) {
  180. if(_isWidgetDisabled(id)) return;
  181. //NOTE: not firing select events if state didn't change
  182. var raiseSelectedEvents = $ax.style.IsWidgetSelected(id) != value;
  183. if(value) {
  184. var group = $('#' + id).attr('selectiongroup');
  185. if(group) {
  186. $("[selectiongroup='" + group + "']").each(function() {
  187. var otherId = this.id;
  188. if(otherId == id) return;
  189. if ($ax.visibility.isScriptIdLimbo($ax.repeater.getScriptIdFromElementId(otherId))) return;
  190. $ax.style.SetWidgetSelected(otherId, false, alwaysApply);
  191. });
  192. }
  193. }
  194. var obj = $obj(id);
  195. if(obj) {
  196. var actionId = id;
  197. if ($ax.public.fn.IsDynamicPanel(obj.type) || $ax.public.fn.IsLayer(obj.type)) {
  198. if(!value) $jobj(id).removeClass('selected');
  199. var children = $axure('#' + id).getChildren()[0].children;
  200. for(var i = 0; i < children.length; i++) {
  201. var childId = children[i];
  202. // Special case for trees
  203. var childObj = $jobj(childId);
  204. if(childObj.hasClass('treeroot')) {
  205. var treenodes = childObj.find('.treenode');
  206. for(var j = 0; j < treenodes.length; j++) {
  207. $axure('#' + treenodes[j].id).selected(value);
  208. }
  209. } else $axure('#' + childId).selected(value);
  210. }
  211. } else {
  212. var widgetHasSelectedState = _widgetHasState(id, SELECTED);
  213. while(obj.isContained && !widgetHasSelectedState) obj = obj.parent;
  214. var itemId = $ax.repeater.getItemIdFromElementId(id);
  215. var path = $ax.getPathFromScriptId($ax.repeater.getScriptIdFromElementId(id));
  216. path[path.length - 1] = obj.id;
  217. actionId = $ax.getElementIdFromPath(path, { itemNum: itemId });
  218. if(alwaysApply || widgetHasSelectedState) {
  219. var state = _generateSelectedState(actionId, value);
  220. _applyImageAndTextJson(actionId, state);
  221. _updateElementIdImageStyle(actionId, state);
  222. }
  223. //added actionId and this hacky logic because we set style state on child, but interaction on parent
  224. //then the id saved in _selectedWidgets would be depended on widgetHasSelectedState... more see case 1818143
  225. while(obj.isContained && !$ax.getObjectFromElementId(id).interactionMap) obj = obj.parent;
  226. path = $ax.getPathFromScriptId($ax.repeater.getScriptIdFromElementId(id));
  227. path[path.length - 1] = obj.id;
  228. actionId = $ax.getElementIdFromPath(path, { itemNum: itemId });
  229. }
  230. }
  231. // ApplyImageAndTextJson(id, value ? 'selected' : 'normal');
  232. _selectedWidgets[id] = value;
  233. if(raiseSelectedEvents) $ax.event.raiseSelectedEvents(actionId, value);
  234. };
  235. var _generateSelectedState = function(id, selected) {
  236. var mouseState = $ax.event.mouseDownObjectId == id ? MOUSE_DOWN : $.inArray(id, $ax.event.mouseOverIds) != -1 ? MOUSE_OVER : NORMAL;
  237. //var mouseState = $ax.event.mouseDownObjectId == id ? MOUSE_DOWN : $ax.event.mouseOverIds.indexOf(id) != -1 ? MOUSE_OVER : NORMAL;
  238. return _generateMouseState(id, mouseState, selected);
  239. };
  240. $ax.style.IsWidgetSelected = function(id) {
  241. return Boolean(_selectedWidgets[id]) || $('#'+id).hasClass('selected');
  242. };
  243. $ax.style.SetWidgetEnabled = function(id, value) {
  244. _disabledWidgets[id] = !value;
  245. $('#' + id).find('a').css('cursor', value ? 'pointer' : 'default');
  246. if(!_widgetHasState(id, DISABLED)) return;
  247. if(!value) {
  248. _applyImageAndTextJson(id, DISABLED);
  249. _updateElementIdImageStyle(id, DISABLED);
  250. } else $ax.style.SetWidgetSelected(id, $ax.style.IsWidgetSelected(id), true);
  251. };
  252. $ax.style.SetWidgetPlaceholder = function(id, active, text, password) {
  253. var inputId = $ax.repeater.applySuffixToElementId(id, '_input');
  254. // Right now this is the only style on the widget. If other styles (ex. Rollover), are allowed
  255. // on TextBox/TextArea, or Placeholder is applied to more widgets, this may need to do more.
  256. var obj = $jobj(inputId);
  257. var height = document.getElementById(inputId).style['height'];
  258. var width = document.getElementById(inputId).style['width'];
  259. obj.attr('style', '');
  260. //removing all styles, but now we can change the size, so we should add them back
  261. //this is more like a quick hack
  262. if (height) obj.css('height', height);
  263. if (width) obj.css('width', width);
  264. if(!active) {
  265. try { //ie8 and below error
  266. if(password) document.getElementById(inputId).type = 'password';
  267. } catch(e) { }
  268. } else {
  269. var element = $('#' + inputId)[0];
  270. var style = _computeAllOverrides(id, undefined, HINT, $ax.adaptive.currentViewId);
  271. var styleProperties = _getCssStyleProperties(style);
  272. //moved this out of GetCssStyleProperties for now because it was breaking un/rollovers with gradient fills
  273. //if(style.fill) styleProperties.allProps.backgroundColor = _getColorFromFill(style.fill);
  274. _applyCssProps(element, styleProperties, true);
  275. try { //ie8 and below error
  276. if(password && text) document.getElementById(inputId).type = 'text';
  277. } catch(e) { }
  278. }
  279. obj.val(text);
  280. };
  281. var _isWidgetDisabled = $ax.style.IsWidgetDisabled = function(id) {
  282. return Boolean(_disabledWidgets[id]);
  283. };
  284. var _elementIdsToImageOverrides = {};
  285. $ax.style.mapElementIdToImageOverrides = function (elementId, override) {
  286. for(var key in override) _addImageOverride(elementId, key, override[key]);
  287. };
  288. var _addImageOverride = function (elementId, state, val) {
  289. if (!_elementIdsToImageOverrides[elementId]) _elementIdsToImageOverrides[elementId] = {};
  290. _elementIdsToImageOverrides[elementId][state] = val;
  291. }
  292. $ax.style.deleteElementIdToImageOverride = function(elementId) {
  293. delete _elementIdsToImageOverrides[elementId];
  294. };
  295. $ax.style.getElementImageOverride = function(elementId, state) {
  296. var url = _elementIdsToImageOverrides[elementId] && _elementIdsToImageOverrides[elementId][state];
  297. return url;
  298. };
  299. $ax.style.elementHasAnyImageOverride = function(elementId) {
  300. return Boolean(_elementIdsToImageOverrides[elementId]);
  301. };
  302. var NORMAL = 'normal';
  303. var MOUSE_OVER = 'mouseOver';
  304. var MOUSE_DOWN = 'mouseDown';
  305. var SELECTED = 'selected';
  306. var DISABLED = 'disabled';
  307. var HINT = 'hint';
  308. var FOCUSED = 'focused';
  309. var SELECTED_FOCUSED = 'selectedFocused';
  310. var _generateState = _style.generateState = function(id) {
  311. return $ax.placeholderManager.isActive(id) ? HINT : _style.IsWidgetDisabled(id) ? DISABLED : _generateSelectedState(id, _style.IsWidgetSelected(id));
  312. };
  313. var _progressState = _style.progessState = function(state) {
  314. if(state == NORMAL) return false;
  315. if(state == MOUSE_DOWN) return MOUSE_OVER;
  316. return NORMAL;
  317. };
  318. var _unprogressState = function(state, goal) {
  319. state = state || NORMAL;
  320. if(state == goal || state == SELECTED_FOCUSED) return undefined;
  321. if(state == NORMAL && goal == MOUSE_DOWN) return MOUSE_OVER;
  322. if(state == NORMAL && goal == SELECTED_FOCUSED) return SELECTED;
  323. if(state == SELECTED && goal == SELECTED_FOCUSED) return FOCUSED;
  324. return goal;
  325. };
  326. var _updateElementIdImageStyle = _style.updateElementIdImageStyle = function(elementId, state) {
  327. if(!_style.elementHasAnyImageOverride(elementId)) return;
  328. if(!state) state = _generateState(elementId);
  329. var style = _computeFullStyle(elementId, state, $ax.adaptive.currentViewId);
  330. var query = $jobj($ax.repeater.applySuffixToElementId(elementId, '_img'));
  331. style.size.width = query.width();
  332. style.size.height = query.height();
  333. var borderId = $ax.repeater.applySuffixToElementId(elementId, '_border');
  334. var borderQuery = $jobj(borderId);
  335. if(!borderQuery.length) {
  336. borderQuery = $('<div></div>');
  337. borderQuery.attr('id', borderId);
  338. query.after(borderQuery);
  339. }
  340. borderQuery.attr('style', '');
  341. //borderQuery.css('position', 'absolute');
  342. query.attr('style', '');
  343. var borderQueryCss = { 'position': 'absolute' };
  344. var queryCss = {}
  345. var borderWidth = Number(style.borderWidth);
  346. var hasBorderWidth = borderWidth > 0;
  347. if(hasBorderWidth) {
  348. //borderQuery.css('border-style', 'solid');
  349. //borderQuery.css('border-width', borderWidth + 'px'); // If images start being able to turn off borders on specific sides, need to update this.
  350. //borderQuery.css('width', style.size.width - borderWidth * 2);
  351. //borderQuery.css('height', style.size.height - borderWidth * 2);
  352. //borderQuery.css({
  353. // 'border-style': 'solid',
  354. // 'border-width': borderWidth + 'px',
  355. // 'width': style.size.width - borderWidth * 2,
  356. // 'height': style.size.height - borderWidth * 2
  357. //});
  358. borderQueryCss['border-style'] = 'solid';
  359. borderQueryCss['border-width'] = borderWidth + 'px'; // If images start being able to turn off borders on specific sides, need to update this.
  360. borderQueryCss['width'] = style.size.width - borderWidth * 2;
  361. borderQueryCss['height'] = style.size.height - borderWidth * 2;
  362. }
  363. var linePattern = style.linePattern;
  364. if(hasBorderWidth && linePattern) borderQueryCss['border-style'] = linePattern;
  365. var borderFill = style.borderFill;
  366. if(hasBorderWidth && borderFill) {
  367. var color = borderFill.fillType == 'solid' ? borderFill.color :
  368. borderFill.fillType == 'linearGradient' ? borderFill.colors[0].color : 0;
  369. var alpha = Math.floor(color / 256 / 256 / 256);
  370. color -= alpha * 256 * 256 * 256;
  371. alpha = alpha / 255;
  372. var red = Math.floor(color / 256 / 256);
  373. color -= red * 256 * 256;
  374. var green = Math.floor(color / 256);
  375. var blue = color - green * 256;
  376. borderQueryCss['border-color'] = _rgbaToFunc(red, green, blue, alpha);
  377. }
  378. var cornerRadiusTopLeft = style.cornerRadius;
  379. if(cornerRadiusTopLeft) {
  380. queryCss['border-radius'] = cornerRadiusTopLeft + 'px';
  381. borderQueryCss['border-radius'] = cornerRadiusTopLeft + 'px';
  382. }
  383. var outerShadow = style.outerShadow;
  384. if(outerShadow && outerShadow.on) {
  385. var arg = '';
  386. arg += outerShadow.offsetX + 'px' + ' ' + outerShadow.offsetY + 'px' + ' ';
  387. var rgba = outerShadow.color;
  388. arg += outerShadow.blurRadius + 'px' + ' 0px ' + _rgbaToFunc(rgba.r, rgba.g, rgba.b, rgba.a);
  389. //query.css('-moz-box-shadow', arg);
  390. //query.css('-wibkit-box-shadow', arg);
  391. //query.css('box-shadow', arg);
  392. //query.css('left', '0px');
  393. //query.css('top', '0px');
  394. //query.css({
  395. // '-moz-box-shadow': arg,
  396. // '-webkit-box-shadow': arg,
  397. // 'box-shadow': arg,
  398. // 'left': '0px',
  399. // 'top': '0px'
  400. //});
  401. queryCss['-moz-box-shadow'] = arg;
  402. queryCss['-wibkit-box-shadow'] = arg;
  403. queryCss['box-shadow'] = arg;
  404. queryCss['left'] = '0px';
  405. queryCss['top'] = '0px';
  406. }
  407. queryCss['width'] = style.size.width;
  408. queryCss['height'] = style.size.height;
  409. borderQuery.css(borderQueryCss);
  410. query.css(queryCss);
  411. //query.css({ width: style.size.width, height: style.size.height });
  412. };
  413. var _rgbaToFunc = function(red, green, blue, alpha) {
  414. return 'rgba(' + red + ',' + green + ',' + blue + ',' + alpha + ')';
  415. };
  416. var _applyImageAndTextJson = function(id, event) {
  417. var textId = $ax.GetTextPanelId(id);
  418. if(textId) _resetTextJson(id, textId);
  419. // This should never be the case
  420. //if(event != '') {
  421. var imgQuery = $jobj($ax.GetImageIdFromShape(id));
  422. var e = imgQuery.data('events');
  423. if(e && e[event]) imgQuery.trigger(event);
  424. var imageUrl = $ax.adaptive.getImageForStateAndView(id, event);
  425. if(imageUrl) _applyImage(id, imageUrl, event);
  426. var style = _computeAllOverrides(id, undefined, event, $ax.adaptive.currentViewId);
  427. if(!$.isEmptyObject(style) && textId) _applyTextStyle(textId, style);
  428. _updateStateClasses(id, event);
  429. _updateStateClasses($ax.repeater.applySuffixToElementId(id, '_div'), event);
  430. _updateStateClasses($ax.repeater.applySuffixToElementId(id, '_input'), event);
  431. };
  432. var _updateStateClasses = function(id, event) {
  433. var jobj = $jobj(id);
  434. //if(jobj[0] && jobj[0].hasAttribute('widgetwidth')) {
  435. // for (var x = 0; x < jobj[0].children.length; x++) {
  436. // var childId = jobj[0].children[x].id;
  437. // if (childId.indexOf('p') < 0) continue;
  438. // _updateStateClasses(childId, event) ;
  439. // }
  440. //} else {
  441. for (var i = 0; i < ALL_STATES.length; i++) jobj.removeClass(ALL_STATES[i]);
  442. if (event == 'mouseDown') jobj.addClass('mouseOver');
  443. if(event != 'normal') jobj.addClass(event);
  444. //}
  445. }
  446. /* -------------------
  447. here's the algorithm in a nutshell:
  448. [DOWN] -- refers to navigation down the view inheritance heirarchy (default to most specific)
  449. [UP] -- navigate up the heirarchy
  450. ComputeAllOverrides (object):
  451. All view styles [DOWN]
  452. If hyperlink
  453. - DO ComputeStateStyle for parent object
  454. - if (MouseOver || MouseDown)
  455. - linkMouseOver Style
  456. - if (MouseDown)
  457. - linkMouseDown style
  458. - ComputeStateStyleForViewChain (parent, STATE)
  459. if (MouseDown) DO ComputeStateStyleForViewChain for object, mouseOver
  460. DO ComputeStateStyleForViewChain for object, style
  461. ComputeStateStyleForViewChain (object, STATE)
  462. FIRST STATE state style [UP] the chain OR default object STATE style
  463. ------------------- */
  464. var FONT_PROPS = {
  465. 'typeface': true,
  466. 'fontName': true,
  467. 'fontWeight': true,
  468. 'fontStyle': true,
  469. 'fontStretch': true,
  470. 'fontSize': true,
  471. 'underline': true,
  472. 'foreGroundFill': true,
  473. 'horizontalAlignment': true,
  474. 'letterCase': true,
  475. 'strikethrough': true
  476. };
  477. var _getViewIdChain = $ax.style.getViewIdChain = function(currentViewId, id, diagramObject) {
  478. var viewIdChain;
  479. if (diagramObject.owner.type != 'Axure:Master') {
  480. viewIdChain = $ax.adaptive.getAdaptiveIdChain(currentViewId);
  481. } else {
  482. //set viewIdChain to the chain from the parent RDO
  483. var parentRdoId = $ax('#' + id).getParents(true, ['rdo'])[0][0];
  484. var rdoState = $ax.style.generateState(parentRdoId);
  485. var rdoStyle = $ax.style.computeFullStyle(parentRdoId, rdoState, currentViewId);
  486. var viewOverride = rdoStyle.viewOverride;
  487. viewIdChain = $ax.adaptive.getMasterAdaptiveIdChain(diagramObject.owner.packageId, viewOverride);
  488. }
  489. return viewIdChain;
  490. }
  491. var _computeAllOverrides = $ax.style.computeAllOverrides = function(id, parentId, state, currentViewId) {
  492. var computedStyle = {};
  493. if(parentId) computedStyle = _computeAllOverrides(parentId, null, state, currentViewId);
  494. var diagramObject = $ax.getObjectFromElementId(id);
  495. var viewIdChain = _getViewIdChain(currentViewId, id, diagramObject);
  496. var excludeFont = _shapesWithSetRichText[id];
  497. for(var i = 0; i < viewIdChain.length; i++) {
  498. var viewId = viewIdChain[i];
  499. var style = diagramObject.adaptiveStyles[viewId];
  500. if(style) {
  501. // we want to exclude the normal font style for shapes where the rich text has been set with an interaction
  502. // so we copy the style so we don't modify the original, then delete all the font props.
  503. if(excludeFont) {
  504. style = $ax.deepCopy(style);
  505. for(var prop in FONT_PROPS) delete style[prop];
  506. }
  507. if(style) {
  508. var customStyle = style.baseStyle && $ax.document.stylesheet.stylesById[style.baseStyle];
  509. //make sure not to extend the customStyle this can mutate it for future use
  510. $.extend(computedStyle, customStyle);
  511. }
  512. $.extend(computedStyle, style);
  513. }
  514. }
  515. var currState = NORMAL;
  516. while(currState) {
  517. $.extend(computedStyle, _computeStateStyleForViewChain(diagramObject, currState, viewIdChain, true));
  518. currState = _unprogressState(currState, state);
  519. }
  520. return _removeUnsupportedProperties(computedStyle, diagramObject);
  521. };
  522. var _computeStateStyleForViewChain = function(diagramObject, state, viewIdChain, excludeNormal) {
  523. var styleObject = diagramObject;
  524. while(styleObject.isContained) styleObject = styleObject.parent;
  525. var adaptiveStyles = styleObject.adaptiveStyles;
  526. for(var i = viewIdChain.length - 1; i >= 0; i--) {
  527. var viewId = viewIdChain[i];
  528. var viewStyle = adaptiveStyles[viewId];
  529. var stateStyle = viewStyle && _getFullStateStyle(viewStyle, state, excludeNormal);
  530. if (stateStyle) return $.extend({}, stateStyle);
  531. else if (viewStyle && viewStyle.stateStyles) return {}; //stateStyles are overriden but states could be null
  532. }
  533. // we dont want to actually include the object style because those are not overrides, hence the true for "excludeNormal" and not passing the val through
  534. var stateStyleFromDefault = _getFullStateStyle(styleObject.style, state, true);
  535. return $.extend({}, stateStyleFromDefault);
  536. };
  537. // returns the full effective style for an object in a state state and view
  538. var _computeFullStyle = $ax.style.computeFullStyle = function(id, state, currentViewId) {
  539. var obj = $obj(id);
  540. var overrides = _computeAllOverrides(id, undefined, state, currentViewId);
  541. // todo: account for image box
  542. var objStyle = obj.style;
  543. var customStyle = objStyle.baseStyle && $ax.document.stylesheet.stylesById[objStyle.baseStyle];
  544. var returnVal = $.extend({}, $ax.document.stylesheet.defaultStyle, customStyle, objStyle, overrides);
  545. return _removeUnsupportedProperties(returnVal, obj);
  546. };
  547. var _removeUnsupportedProperties = function(style, object) {
  548. // for now all we need to do is remove padding from checkboxes and radio buttons
  549. if ($ax.public.fn.IsRadioButton(object.type) || $ax.public.fn.IsCheckBox(object.type)) {
  550. style.paddingTop = 0;
  551. style.paddingLeft = 0;
  552. style.paddingRight = 0;
  553. style.paddingBottom = 0;
  554. }
  555. if ($ax.public.fn.IsTextBox(object.type) || $ax.public.fn.IsTextArea(object.type) || $ax.public.fn.IsButton(object.type)
  556. || $ax.public.fn.IsListBox(object.type) || $ax.public.fn.IsComboBox(object.type)) {
  557. if (object.images && style.fill) delete style['fill'];
  558. }
  559. return style;
  560. };
  561. var _getFullStateStyle = function(style, state, excludeNormal) {
  562. //'normal' is needed because now DiagramObjects get their image from the Style and unapplying a rollover needs the image
  563. var stateStyle = state == 'normal' && !excludeNormal ? style : style && style.stateStyles && style.stateStyles[state];
  564. if(stateStyle) {
  565. var customStyle = stateStyle.baseStyle && $ax.document.stylesheet.stylesById[stateStyle.baseStyle];
  566. //make sure not to extend the customStyle this can mutate it for future use
  567. return $.extend({}, customStyle, stateStyle);
  568. }
  569. return undefined;
  570. };
  571. // commented this out for now... we actually will probably need it for ie
  572. var _applyOpacityFromStyle = $ax.style.applyOpacityFromStyle = function(id, style) {
  573. return;
  574. var opacity = style.opacity || '';
  575. $jobj(id).children().css('opacity', opacity);
  576. };
  577. var _initialize = function() {
  578. //$ax.style.initializeObjectTextAlignment($ax('*'));
  579. };
  580. $ax.style.initialize = _initialize;
  581. //var _initTextAlignment = function(elementId) {
  582. // var textId = $ax.GetTextPanelId(elementId);
  583. // if(textId) {
  584. // _storeIdToAlignProps(textId);
  585. // // now handle vertical alignment
  586. // if(_getObjVisible(textId)) {
  587. // //_setTextAlignment(textId, _idToAlignProps[textId], false);
  588. // _setTextAlignment(textId);
  589. // }
  590. // }
  591. //};
  592. //$ax.style.initializeObjectTextAlignment = function(query) {
  593. // query.filter(function(diagramObject) {
  594. // return $ax.public.fn.IsVector(diagramObject.type) || $ax.public.fn.IsImageBox(diagramObject.type);
  595. // }).each(function(diagramObject, elementId) {
  596. // if($jobj(elementId).length == 0) return;
  597. // _initTextAlignment(elementId);
  598. // });
  599. //};
  600. //$ax.style.initializeObjectTextAlignment = function (query) {
  601. // var textIds = [];
  602. // query.filter(function(diagramObject) {
  603. // return $ax.public.fn.IsVector(diagramObject.type) || $ax.public.fn.IsImageBox(diagramObject.type);
  604. // }).each(function(diagramObject, elementId) {
  605. // if($jobj(elementId).length == 0) return;
  606. // var textId = $ax.GetTextPanelId(elementId);
  607. // if(textId) {
  608. // _storeIdToAlignProps(textId);
  609. // textIds.push(textId);
  610. // }
  611. // });
  612. // $ax.style.setTextAlignment(textIds);
  613. //};
  614. //var _getPadding = $ax.style.getPadding = function (textId) {
  615. // var shapeId = $ax.GetShapeIdFromText(textId);
  616. // var shapeObj = $obj(shapeId);
  617. // var state = _generateState(shapeId);
  618. // var style = _computeFullStyle(shapeId, state, $ax.adaptive.currentViewId);
  619. // var vAlign = style.verticalAlignment || 'middle';
  620. // var paddingLeft = Number(style.paddingLeft) || 0;
  621. // paddingLeft += (Number(shapeObj && shapeObj.extraLeft) || 0);
  622. // var paddingTop = style.paddingTop || 0;
  623. // var paddingRight = style.paddingRight || 0;
  624. // var paddingBottom = style.paddingBottom || 0;
  625. // return { vAlign: vAlign, paddingLeft: paddingLeft, paddingTop: paddingTop, paddingRight: paddingRight, paddingBottom: paddingBottom };
  626. //}
  627. //var _storeIdToAlignProps = function(textId) {
  628. // _idToAlignProps[textId] = _getPadding(textId);
  629. //};
  630. var ALL_STATES = ['mouseOver', 'mouseDown', 'selected', 'focused', 'selectedFocused', 'disabled'];
  631. var _applyImage = $ax.style.applyImage = function (id, imgUrl, state) {
  632. var object = $obj(id);
  633. if (object.generateCompound) {
  634. for (var i = 0; i < object.compoundChildren.length; i++) {
  635. var componentId = object.compoundChildren[i];
  636. var childId = $ax.public.fn.getComponentId(id, componentId);
  637. var childImgQuery = $jobj(childId + '_img');
  638. var childQuery = $jobj(childId);
  639. childImgQuery.attr('src', imgUrl[componentId]);
  640. for (var j = 0; j < ALL_STATES.length; j++) {
  641. childImgQuery.removeClass(ALL_STATES[j]);
  642. childQuery.removeClass(ALL_STATES[j]);
  643. }
  644. if (state != 'normal') {
  645. childImgQuery.addClass(state);
  646. childQuery.addClass(state);
  647. }
  648. }
  649. } else {
  650. var imgQuery = $jobj($ax.GetImageIdFromShape(id));
  651. var idQuery = $jobj(id);
  652. //it is hard to tell if setting the image or the class first causing less flashing when adding shadows.
  653. imgQuery.attr('src', imgUrl);
  654. for (var i = 0; i < ALL_STATES.length; i++) {
  655. idQuery.removeClass(ALL_STATES[i]);
  656. imgQuery.removeClass(ALL_STATES[i]);
  657. }
  658. if (state != 'normal') {
  659. idQuery.addClass(state);
  660. imgQuery.addClass(state);
  661. }
  662. if (imgQuery.parents('a.basiclink').length > 0) imgQuery.css('border', 'none');
  663. }
  664. };
  665. $ax.public.fn.getComponentId = function (id, componentId) {
  666. var idParts = id.split('-');
  667. idParts[0] = idParts[0] + componentId;
  668. return idParts.join('-');
  669. }
  670. var _resetTextJson = function(id, textid) {
  671. // reset the opacity
  672. $jobj(id).children().css('opacity', '');
  673. var cacheObject = _originalTextCache[textid];
  674. if(cacheObject) {
  675. _transformTextWithVerticalAlignment(textid, function() {
  676. var styleCache = cacheObject.styleCache;
  677. var textQuery = $('#' + textid);
  678. textQuery.find('*').each(function(index, element) {
  679. element.style.cssText = styleCache[element.id];
  680. });
  681. });
  682. }
  683. };
  684. // Preserves the alingment for the element textid after executing transformFn
  685. //var _getRtfElementHeight = function(rtfElement) {
  686. // if(rtfElement.innerHTML == '') rtfElement.innerHTML = '&nbsp;';
  687. // // To handle render text as image
  688. // //var images = $(rtfElement).children('img');
  689. // //if(images.length) return images.height();
  690. // return rtfElement.offsetHeight;
  691. //};
  692. // why microsoft decided to default to round to even is beyond me...
  693. //var _roundToEven = function(number) {
  694. // var numString = number.toString();
  695. // var parts = numString.split('.');
  696. // if(parts.length == 1) return number;
  697. // if(parts[1].length == 1 && parts[1] == '5') {
  698. // var wholePart = Number(parts[0]);
  699. // return wholePart % 2 == 0 ? wholePart : wholePart + 1;
  700. // } else return Math.round(number);
  701. //};
  702. //var _suspendTextAlignment = 0;
  703. //var _suspendedTextIds = [];
  704. //$ax.style.startSuspendTextAlignment = function() {
  705. // _suspendTextAlignment++;
  706. //}
  707. //$ax.style.resumeSuspendTextAlignment = function () {
  708. // _suspendTextAlignment--;
  709. // if(_suspendTextAlignment == 0) $ax.style.setTextAlignment(_suspendedTextIds);
  710. //}
  711. var _transformTextWithVerticalAlignment = $ax.style.transformTextWithVerticalAlignment = function(textId, transformFn) {
  712. if(!_originalTextCache[textId]) {
  713. $ax.style.CacheOriginalText(textId);
  714. }
  715. var rtfElement = window.document.getElementById(textId);
  716. if(!rtfElement) return;
  717. transformFn();
  718. //_storeIdToAlignProps(textId);
  719. //if (_suspendTextAlignment) {
  720. // _suspendedTextIds.push(textId);
  721. // return;
  722. //}
  723. //$ax.style.setTextAlignment([textId]);
  724. };
  725. // this is for vertical alignments set on hidden objects
  726. //var _idToAlignProps = {};
  727. //$ax.style.updateTextAlignmentForVisibility = function (textId) {
  728. // var textObj = $jobj(textId);
  729. // // must check if parent id exists. Doesn't exist for text objs in check boxes, and potentially elsewhere.
  730. // var parentId = textObj.parent().attr('id');
  731. // if (parentId && $ax.visibility.isContainer(parentId)) return;
  732. // //var alignProps = _idToAlignProps[textId];
  733. // //if(!alignProps || !_getObjVisible(textId)) return;
  734. // //if (!alignProps) return;
  735. // //_setTextAlignment(textId, alignProps);
  736. // _setTextAlignment(textId);
  737. //};
  738. var _getObjVisible = _style.getObjVisible = function (id) {
  739. var element = document.getElementById(id);
  740. return element && (element.offsetWidth || element.offsetHeight);
  741. };
  742. //$ax.style.setTextAlignment = function (textIds) {
  743. // var getTextAlignDim = function(textId, alignProps) {
  744. // var dim = {};
  745. // var vAlign = alignProps.vAlign;
  746. // var paddingTop = Number(alignProps.paddingTop);
  747. // var paddingBottom = Number(alignProps.paddingBottom);
  748. // var paddingLeft = Number(alignProps.paddingLeft);
  749. // var paddingRight = Number(alignProps.paddingRight);
  750. // var topParam = 0.0;
  751. // var bottomParam = 1.0;
  752. // var leftParam = 0.0;
  753. // var rightParam = 1.0;
  754. // var textObj = $jobj(textId);
  755. // var textObjParent = textObj.offsetParent();
  756. // var parentId = textObjParent.attr('id');
  757. // if(!parentId) {
  758. // // Only case should be for radio/checkbox that get the label now because it must be absolute positioned for animate (offset parent ignored it before)
  759. // textObjParent = textObjParent.parent();
  760. // parentId = textObjParent.attr('id');
  761. // }
  762. // parentId = $ax.visibility.getWidgetFromContainer(textObjParent.attr('id'));
  763. // textObjParent = $jobj(parentId);
  764. // var parentObj = $obj(parentId);
  765. // if(parentObj['bottomTextPadding']) bottomParam = parentObj['bottomTextPadding'];
  766. // if(parentObj['topTextPadding']) topParam = parentObj['topTextPadding'];
  767. // if(parentObj['leftTextPadding']) leftParam = parentObj['leftTextPadding'];
  768. // if(parentObj['rightTextPadding']) rightParam = parentObj['rightTextPadding'];
  769. // // smart shapes are mutually exclusive from compound vectors.
  770. // var isConnector = parentObj.type == $ax.constants.CONNECTOR_TYPE;
  771. // if(isConnector) return;
  772. // var axTextObjectParent = $ax('#' + textObjParent.attr('id'));
  773. // var jDims = textObj.css(['width','left','top']);
  774. // var oldWidth = $ax.getNumFromPx(jDims['width']);
  775. // var oldLeft = $ax.getNumFromPx(jDims['left']);
  776. // var oldTop = $ax.getNumFromPx(jDims['top']);
  777. // var newTop = 0;
  778. // var newLeft = 0.0;
  779. // var size = axTextObjectParent.size();
  780. // var width = size.width;
  781. // var height = size.height;
  782. // //var width = axTextObjectParent.width();
  783. // //var height = axTextObjectParent.height();
  784. // // If text rotated need to handle getting the correct width for text based on bounding rect of rotated parent.
  785. // var boundingRotation = -$ax.move.getRotationDegreeFromElement(textObj[0]);
  786. // var boundingParent = $axure.fn.getBoundingSizeForRotate(width, height, boundingRotation);
  787. // var extraLeftPadding = (width - boundingParent.width) / 2;
  788. // width = boundingParent.width;
  789. // var relativeTop = 0.0;
  790. // relativeTop = height * topParam;
  791. // var containerHeight = height * bottomParam - relativeTop;
  792. // newLeft = paddingLeft + extraLeftPadding + width * leftParam;
  793. // var newWidth = width * (rightParam - leftParam) - paddingLeft - paddingRight;
  794. // var horizChange = newWidth != oldWidth || newLeft != oldLeft;
  795. // if(horizChange) {
  796. // dim.left = newLeft;
  797. // dim.width = newWidth;
  798. // //textObj.css('left', newLeft);
  799. // //textObj.width(newWidth);
  800. // }
  801. // var textHeight = _getRtfElementHeight(textObj[0]);
  802. // if(vAlign == "middle")
  803. // newTop = _roundToEven(relativeTop + (containerHeight - textHeight + paddingTop - paddingBottom) / 2);
  804. // else if(vAlign == "bottom")
  805. // newTop = _roundToEven(relativeTop + containerHeight - textHeight - paddingBottom);
  806. // else newTop = _roundToEven(paddingTop + relativeTop);
  807. // var vertChange = oldTop != newTop;
  808. // if (vertChange) dim.top = newTop; //textObj.css('top', newTop + 'px');
  809. // return dim;
  810. // };
  811. // var applyTextAlignment = function(textId, dim) {
  812. // var textObj = $jobj(textId);
  813. // if(dim.left) {
  814. // textObj.css('left', dim.left);
  815. // textObj.width(dim.width);
  816. // }
  817. // if(dim.top) textObj.css('top', dim.top);
  818. // if((dim.top || dim.left)) _updateTransformOrigin(textId);
  819. // };
  820. // var idToDim = [];
  821. // for (var i = 0; i < textIds.length; i++) {
  822. // var textId = textIds[i];
  823. // var alignProps = _idToAlignProps[textId];
  824. // if (!alignProps || !_getObjVisible(textId)) continue;
  825. // idToDim.push({ id: textId, dim: getTextAlignDim(textId, alignProps) });
  826. // }
  827. // for (var i = 0; i < idToDim.length; i++) {
  828. // var info = idToDim[i];
  829. // applyTextAlignment(info.id, info.dim);
  830. // }
  831. //};
  832. //var _setTextAlignment = function(textId, alignProps, updateProps) {
  833. // if(updateProps) _storeIdToAlignProps(textId);
  834. // if(!alignProps) return;
  835. // var vAlign = alignProps.vAlign;
  836. // var paddingTop = Number(alignProps.paddingTop);
  837. // var paddingBottom = Number(alignProps.paddingBottom);
  838. // var paddingLeft = Number(alignProps.paddingLeft);
  839. // var paddingRight = Number(alignProps.paddingRight);
  840. // var topParam = 0.0;
  841. // var bottomParam = 1.0;
  842. // var leftParam = 0.0;
  843. // var rightParam = 1.0;
  844. // var textObj = $jobj(textId);
  845. // var textObjParent = textObj.offsetParent();
  846. // var parentId = textObjParent.attr('id');
  847. // var isConnector = false;
  848. // if(parentId) {
  849. // parentId = $ax.visibility.getWidgetFromContainer(textObjParent.attr('id'));
  850. // textObjParent = $jobj(parentId);
  851. // var parentObj = $obj(parentId);
  852. // if(parentObj['bottomTextPadding']) bottomParam = parentObj['bottomTextPadding'];
  853. // if(parentObj['topTextPadding']) topParam = parentObj['topTextPadding'];
  854. // if(parentObj['leftTextPadding']) leftParam = parentObj['leftTextPadding'];
  855. // if(parentObj['rightTextPadding']) rightParam = parentObj['rightTextPadding'];
  856. // // smart shapes are mutually exclusive from compound vectors.
  857. // isConnector = parentObj.type == $ax.constants.CONNECTOR_TYPE;
  858. // }
  859. // if(isConnector) return;
  860. // var axTextObjectParent = $ax('#' + textObjParent.attr('id'));
  861. // var oldWidth = $ax.getNumFromPx(textObj.css('width'));
  862. // var oldLeft = $ax.getNumFromPx(textObj.css('left'));
  863. // var oldTop = $ax.getNumFromPx(textObj.css('top'));
  864. // var newTop = 0;
  865. // var newLeft = 0.0;
  866. // var width = axTextObjectParent.width();
  867. // var height = axTextObjectParent.height();
  868. // // If text rotated need to handle getting the correct width for text based on bounding rect of rotated parent.
  869. // var boundingRotation = -$ax.move.getRotationDegreeFromElement(textObj[0]);
  870. // var boundingParent = $axure.fn.getBoundingSizeForRotate(width, height, boundingRotation);
  871. // var extraLeftPadding = (width - boundingParent.width) / 2;
  872. // width = boundingParent.width;
  873. // var relativeTop = 0.0;
  874. // relativeTop = height * topParam;
  875. // var containerHeight = height * bottomParam - relativeTop;
  876. // newLeft = paddingLeft + extraLeftPadding + width * leftParam;
  877. // var newWidth = width * (rightParam - leftParam) - paddingLeft - paddingRight;
  878. // var horizChange = newWidth != oldWidth || newLeft != oldLeft;
  879. // if(horizChange) {
  880. // textObj.css('left', newLeft);
  881. // textObj.width(newWidth);
  882. // }
  883. // var textHeight = _getRtfElementHeight(textObj[0]);
  884. // if(vAlign == "middle") newTop = _roundToEven(relativeTop + (containerHeight - textHeight + paddingTop - paddingBottom) / 2);
  885. // else if(vAlign == "bottom") newTop = _roundToEven(relativeTop + containerHeight - textHeight - paddingBottom);
  886. // else newTop = _roundToEven(paddingTop + relativeTop);
  887. // var vertChange = oldTop != newTop;
  888. // if(vertChange) textObj.css('top', newTop + 'px');
  889. // if((vertChange || horizChange)) _updateTransformOrigin(textId);
  890. //};
  891. //var _updateTransformOrigin = function (textId) {
  892. // var textObj = $jobj(textId);
  893. // var parentId = textObj.parent().attr('id');
  894. // if(!$obj(parentId).hasTransformOrigin) return;
  895. // //var transformOrigin = textObj.css('-webkit-transform-origin') ||
  896. // // textObj.css('-moz-transform-origin') ||
  897. // // textObj.css('-ms-transform-origin') ||
  898. // // textObj.css('transform-origin');
  899. // //if(transformOrigin) {
  900. // var textObjParent = $ax('#' + textObj.parent().attr('id'));
  901. // var newX = (textObjParent.width() / 2 - $ax.getNumFromPx(textObj.css('left')));
  902. // var newY = (textObjParent.height() / 2 - $ax.getNumFromPx(textObj.css('top')));
  903. // var newOrigin = newX + 'px ' + newY + 'px';
  904. // textObj.css('-webkit-transform-origin', newOrigin);
  905. // textObj.css('-moz-transform-origin', newOrigin);
  906. // textObj.css('-ms-transform-origin', newOrigin);
  907. // textObj.css('transform-origin', newOrigin);
  908. // //}
  909. //};
  910. $ax.style.reselectElements = function() {
  911. for(var id in _selectedWidgets) {
  912. // Only looking for the selected widgets that don't have their class set
  913. if(!_selectedWidgets[id] || $jobj(id).hasClass('selected')) continue;
  914. $jobj(id).addClass('selected');
  915. _applyImageAndTextJson(id, $ax.style.generateState(id));
  916. }
  917. for(id in _disabledWidgets) {
  918. // Only looking for the disabled widgets that don't have their class yet
  919. if (!_disabledWidgets[id] || $jobj(id).hasClass('disabled')) continue;
  920. $jobj(id).addClass('disabled');
  921. _applyImageAndTextJson(id, $ax.style.generateState(id));
  922. }
  923. }
  924. $ax.style.clearStateForRepeater = function(repeaterId) {
  925. var children = $ax.getChildElementIdsForRepeater(repeaterId);
  926. for(var i = 0; i < children.length; i++) {
  927. var id = children[i];
  928. delete _selectedWidgets[id];
  929. delete _disabledWidgets[id];
  930. }
  931. }
  932. _style.updateStateClass = function (repeaterId) {
  933. var subElementIds = $ax.getChildElementIdsForRepeater(repeaterId);
  934. for (var i = 0; i < subElementIds.length; i++) {
  935. _applyImageAndTextJson(subElementIds[i], $ax.style.generateState(subElementIds[i]));
  936. }
  937. }
  938. $ax.style.clearAdaptiveStyles = function() {
  939. for(var shapeId in _adaptiveStyledWidgets) {
  940. var repeaterId = $ax.getParentRepeaterFromScriptId(shapeId);
  941. if(repeaterId) continue;
  942. var elementId = $ax.GetButtonShapeId(shapeId);
  943. if(elementId) _applyImageAndTextJson(elementId, $ax.style.generateState(elementId));
  944. }
  945. _adaptiveStyledWidgets = {};
  946. };
  947. $ax.style.setAdaptiveStyle = function(shapeId, style) {
  948. _adaptiveStyledWidgets[$ax.repeater.getScriptIdFromElementId(shapeId)] = style;
  949. var textId = $ax.GetTextPanelId(shapeId);
  950. if(textId) _applyTextStyle(textId, style);
  951. $ax.placeholderManager.refreshPlaceholder(shapeId);
  952. // removing this for now
  953. // if(style.location) {
  954. // $jobj(shapeId).css('top', style.location.x + "px")
  955. // .css('left', style.location.y + "px");
  956. // }
  957. };
  958. //-------------------------------------------------------------------------
  959. // _applyTextStyle
  960. //
  961. // Applies a rollover style to a text element.
  962. // id : the id of the text object to set.
  963. // styleProperties : an object mapping style properties to values. eg:
  964. // { 'fontWeight' : 'bold',
  965. // 'fontStyle' : 'italic' }
  966. //-------------------------------------------------------------------------
  967. var _applyTextStyle = function(id, style) {
  968. _transformTextWithVerticalAlignment(id, function() {
  969. var styleProperties = _getCssStyleProperties(style);
  970. $('#' + id).find('*').each(function(index, element) {
  971. _applyCssProps(element, styleProperties);
  972. });
  973. });
  974. };
  975. var _applyCssProps = function(element, styleProperties, applyAllStyle) {
  976. if(applyAllStyle) {
  977. var allProps = styleProperties.allProps;
  978. for(var prop in allProps) element.style[prop] = allProps[prop];
  979. } else {
  980. var nodeName = element.nodeName.toLowerCase();
  981. if(nodeName == 'p') {
  982. var parProps = styleProperties.parProps;
  983. for(prop in parProps) element.style[prop] = parProps[prop];
  984. } else if(nodeName != 'a') {
  985. var runProps = styleProperties.runProps;
  986. for(prop in runProps) element.style[prop] = runProps[prop];
  987. }
  988. }
  989. };
  990. var _getCssShadow = function(shadow) {
  991. return !shadow.on ? "none"
  992. : shadow.offsetX + "px " + shadow.offsetY + "px " + shadow.blurRadius + "px " + _getCssColor(shadow.color);
  993. };
  994. var _getCssStyleProperties = function(style) {
  995. var toApply = {};
  996. toApply.runProps = {};
  997. toApply.parProps = {};
  998. toApply.allProps = {};
  999. if(style.fontName) toApply.allProps.fontFamily = toApply.runProps.fontFamily = style.fontName;
  1000. // we need to set font size on both runs and pars because otherwise it well mess up the measure and thereby vertical alignment
  1001. if(style.fontSize) toApply.allProps.fontSize = toApply.runProps.fontSize = toApply.parProps.fontSize = style.fontSize;
  1002. if(style.fontWeight !== undefined) toApply.allProps.fontWeight = toApply.runProps.fontWeight = style.fontWeight;
  1003. if(style.fontStyle !== undefined) toApply.allProps.fontStyle = toApply.runProps.fontStyle = style.fontStyle;
  1004. var textDecoration = [];
  1005. if(style.underline !== undefined) textDecoration[0] = style.underline ? 'underline ' : 'none';
  1006. if(style.strikethrough !== undefined) {
  1007. var index = textDecoration.length;
  1008. if(style.strikethrough) textDecoration[index] ='line-through';
  1009. else if(index == 0) textDecoration[0] = 'none';
  1010. }
  1011. if (textDecoration.length > 0) {
  1012. var decorationLineUp = "";
  1013. for (var l = 0; l < textDecoration.length; l++) {
  1014. decorationLineUp = decorationLineUp + textDecoration[l];
  1015. }
  1016. toApply.allProps.textDecoration = toApply.runProps.textDecoration = decorationLineUp;
  1017. }
  1018. if(style.foreGroundFill) {
  1019. toApply.allProps.color = toApply.runProps.color = _getColorFromFill(style.foreGroundFill);
  1020. //if(style.foreGroundFill.opacity) toApply.allProps.opacity = toApply.runProps.opacity = style.foreGroundFill.opacity;
  1021. }
  1022. if(style.horizontalAlignment) toApply.allProps.textAlign = toApply.parProps.textAlign = toApply.runProps.textAlign = style.horizontalAlignment;
  1023. if(style.lineSpacing) toApply.allProps.lineHeight = toApply.parProps.lineHeight = style.lineSpacing;
  1024. if(style.textShadow) toApply.allProps.textShadow = toApply.parProps.textShadow = _getCssShadow(style.textShadow);
  1025. if (style.letterCase) toApply.allProps.textTransform = toApply.parProps.textTransform = style.letterCase;
  1026. if (style.characterSpacing) toApply.allProps.letterSpacing = toApply.runProps.letterSpacing = style.characterSpacing;
  1027. return toApply;
  1028. };
  1029. var _getColorFromFill = function(fill) {
  1030. //var fillString = '00000' + fill.color.toString(16);
  1031. //return '#' + fillString.substring(fillString.length - 6);
  1032. var val = fill.color;
  1033. var color = {};
  1034. color.b = val % 256;
  1035. val = Math.floor(val / 256);
  1036. color.g = val % 256;
  1037. val = Math.floor(val / 256);
  1038. color.r = val % 256;
  1039. color.a = typeof (fill.opacity) == 'number' ? fill.opacity : 1;
  1040. return _getCssColor(color);
  1041. };
  1042. var _getCssColor = function(rgbaObj) {
  1043. return "rgba(" + rgbaObj.r + ", " + rgbaObj.g + ", " + rgbaObj.b + ", " + rgbaObj.a + ")";
  1044. };
  1045. // //--------------------------------------------------------------------------
  1046. // // ApplyStyleRecursive
  1047. // //
  1048. // // Applies a style recursively to all span and div tags including elementNode
  1049. // // and all of its children.
  1050. // //
  1051. // // element : the element to apply the style to
  1052. // // styleName : the name of the style property to set (eg. 'font-weight')
  1053. // // styleValue : the value of the style to set (eg. 'bold')
  1054. // //--------------------------------------------------------------------------
  1055. // function ApplyStyleRecursive(element, styleName, styleValue) {
  1056. // var nodeName = element.nodeName.toLowerCase();
  1057. // if (nodeName == 'div' || nodeName == 'span' || nodeName == 'p') {
  1058. // element.style[styleName] = styleValue;
  1059. // }
  1060. // for (var i = 0; i < element.childNodes.length; i++) {
  1061. // ApplyStyleRecursive(element.childNodes[i], styleName, styleValue);
  1062. // }
  1063. // }
  1064. // //---------------------------------------------------------------------------
  1065. // // ApplyTextProperty
  1066. // //
  1067. // // Applies a text property to rtfElement.
  1068. // //
  1069. // // rtfElement : the the root text element of the rtf object (this is the
  1070. // // element named <id>_rtf
  1071. // // prop : the style property to set.
  1072. // // value : the style value to set.
  1073. // //---------------------------------------------------------------------------
  1074. // function ApplyTextProperty(rtfElement, prop, value) {
  1075. // /*
  1076. // var oldHtml = rtfElement.innerHTML;
  1077. // if (prop == 'fontWeight') {
  1078. // rtfElement.innerHTML = oldHtml.replace(/< *b *\/?>/gi, "");
  1079. // } else if (prop == 'fontStyle') {
  1080. // rtfElement.innerHTML = oldHtml.replace(/< *i *\/?>/gi, "");
  1081. // } else if (prop == 'textDecoration') {
  1082. // rtfElement.innerHTML = oldHtml.replace(/< *u *\/?>/gi, "");
  1083. // }
  1084. // */
  1085. // for (var i = 0; i < rtfElement.childNodes.length; i++) {
  1086. // ApplyStyleRecursive(rtfElement.childNodes[i], prop, value);
  1087. // }
  1088. // }
  1089. //}
  1090. //---------------------------------------------------------------------------
  1091. // GetAndCacheOriginalText
  1092. //
  1093. // Gets the html for the pre-rollover state and returns the Html representing
  1094. // the Rich text.
  1095. //---------------------------------------------------------------------------
  1096. var CACHE_COUNTER = 0;
  1097. $ax.style.CacheOriginalText = function(textId, hasRichTextBeenSet) {
  1098. var rtfQuery = $('#' + textId);
  1099. if(rtfQuery.length > 0) {
  1100. var styleCache = {};
  1101. rtfQuery.find('*').each(function(index, element) {
  1102. var elementId = element.id;
  1103. if(!elementId) element.id = elementId = 'cache' + CACHE_COUNTER++;
  1104. styleCache[elementId] = element.style.cssText;
  1105. });
  1106. _originalTextCache[textId] = {
  1107. styleCache: styleCache
  1108. };
  1109. if(hasRichTextBeenSet) {
  1110. var shapeId = $ax.GetShapeIdFromText(textId);
  1111. _shapesWithSetRichText[shapeId] = true;
  1112. }
  1113. }
  1114. };
  1115. $ax.style.ClearCacheForRepeater = function(repeaterId) {
  1116. for(var elementId in _originalTextCache) {
  1117. var scriptId = $ax.repeater.getScriptIdFromElementId(elementId);
  1118. if($ax.getParentRepeaterFromScriptId(scriptId) == repeaterId) delete _originalTextCache[elementId];
  1119. }
  1120. };
  1121. $ax.style.prefetch = function() {
  1122. var scriptIds = $ax.getAllScriptIds();
  1123. var image = new Image();
  1124. for(var i = 0; i < scriptIds.length; i++) {
  1125. var obj = $obj(scriptIds[i]);
  1126. if (!$ax.public.fn.IsImageBox(obj.type)) continue;
  1127. var images = obj.images;
  1128. for (var key in images) image.src = images[key];
  1129. var imageOverrides = obj.imageOverrides;
  1130. for(var elementId in imageOverrides) {
  1131. var override = imageOverrides[elementId];
  1132. for (var state in override) {
  1133. _addImageOverride(elementId, state, override[state]);
  1134. image.src = override[state];
  1135. }
  1136. }
  1137. }
  1138. };
  1139. });