style.js 74 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695169616971698169917001701170217031704170517061707170817091710171117121713171417151716171717181719172017211722172317241725172617271728172917301731173217331734173517361737173817391740174117421743174417451746174717481749
  1. $axure.internal(function($ax) {
  2. var _style = {};
  3. $ax.style = _style;
  4. var _disabledWidgets = {};
  5. var _selectedWidgets = {};
  6. var _errorWidgets = {};
  7. var _hintWidgets = {};
  8. // A table to cache the outerHTML of the _rtf elements before the rollover state is applied.
  9. var _originalTextCache = {};
  10. // A table to exclude the normal style from adaptive overrides
  11. var _shapesWithSetRichText = {};
  12. // just a listing of shape ids
  13. var _adaptiveStyledWidgets = {};
  14. var _setLinkStyle = function(id, styleName) {
  15. var parentId = $ax.GetParentIdFromLink(id);
  16. var style = _computeAllOverrides(id, parentId, styleName, $ax.adaptive.currentViewId);
  17. var textId = $ax.GetTextPanelId(parentId);
  18. if(!_originalTextCache[textId]) {
  19. $ax.style.CacheOriginalText(textId);
  20. }
  21. if($.isEmptyObject(style)) return;
  22. var textCache = _originalTextCache[textId].styleCache;
  23. _transformTextWithVerticalAlignment(textId, function() {
  24. var cssProps = _getCssStyleProperties(style);
  25. $('#' + id).find('*').addBack().each(function(index, element) {
  26. element.setAttribute('style', textCache[element.id]);
  27. _applyCssProps(element, cssProps);
  28. });
  29. });
  30. };
  31. var _resetLinkStyle = function(id) {
  32. var textId = $ax.GetTextPanelId($ax.GetParentIdFromLink(id));
  33. var textCache = _originalTextCache[textId].styleCache;
  34. _transformTextWithVerticalAlignment(textId, function() {
  35. $('#' + id).find('*').addBack().each(function(index, element) {
  36. element.style.cssText = textCache[element.id];
  37. });
  38. });
  39. if($ax.event.mouseDownObjectId) {
  40. $ax.style.SetWidgetMouseDown($ax.event.mouseDownObjectId, true);
  41. } else if($ax.event.mouseOverObjectId) {
  42. $ax.style.SetWidgetHover($ax.event.mouseOverObjectId, true);
  43. }
  44. };
  45. $ax.style.SetLinkHover = function(id) {
  46. _setLinkStyle(id, MOUSE_OVER);
  47. };
  48. $ax.style.SetLinkNotHover = function(id) {
  49. _resetLinkStyle(id);
  50. };
  51. $ax.style.SetLinkMouseDown = function(id) {
  52. _setLinkStyle(id, MOUSE_DOWN);
  53. };
  54. $ax.style.SetLinkNotMouseDown = function(id) {
  55. _resetLinkStyle(id);
  56. var style = _computeAllOverrides(id, $ax.event.mouseOverObjectId, MOUSE_OVER, $ax.adaptive.currentViewId);
  57. if(!$.isEmptyObject(style)) $ax.style.SetLinkHover(id);
  58. //we dont do anything here because the widget not mouse down has taken over here
  59. };
  60. var _widgetHasState = function(id, state) {
  61. if($ax.style.getElementImageOverride(id, state)) return true;
  62. var diagramObject = $ax.getObjectFromElementId(id);
  63. //var adaptiveIdChain = $ax.adaptive.getAdaptiveIdChain($ax.adaptive.currentViewId);
  64. var adaptiveIdChain = $ax.style.getViewIdChain($ax.adaptive.currentViewId, id, diagramObject);
  65. for(var i = 0; i < adaptiveIdChain.length; i++) {
  66. var viewId = adaptiveIdChain[i];
  67. var adaptiveStyle = diagramObject.adaptiveStyles[viewId];
  68. if(adaptiveStyle && adaptiveStyle.stateStyles && adaptiveStyle.stateStyles[state]) return true;
  69. }
  70. if(diagramObject.style.stateStyles) {
  71. var stateStyle = diagramObject.style.stateStyles[state];
  72. if(!stateStyle) return false;
  73. return !$.isEmptyObject(stateStyle);
  74. }
  75. return false;
  76. };
  77. $ax.style.SetWidgetHover = function(id, value) {
  78. if(!_widgetHasState(id, MOUSE_OVER)) return;
  79. var valToSet = value || _isRolloverOverride(id);
  80. const state = _generateFullState(id, undefined, undefined, undefined, undefined, valToSet);
  81. _applyImageAndTextJson(id, state);
  82. _updateElementIdImageStyle(id, state);
  83. };
  84. var _rolloverOverrides = [];
  85. var _isRolloverOverride = function(id) {
  86. return _rolloverOverrides.indexOf(id) != -1;
  87. };
  88. $ax.style.AddRolloverOverride = function(id) {
  89. if(_isRolloverOverride(id)) return;
  90. _rolloverOverrides[_rolloverOverrides.length] = id;
  91. if($ax.event.mouseOverIds.indexOf(id) == -1) $ax.style.SetWidgetHover(id, true);
  92. };
  93. $ax.style.RemoveRolloverOverride = function(id) {
  94. var index = _rolloverOverrides.indexOf(id);
  95. if(index == -1) return;
  96. $ax.splice(_rolloverOverrides, index, 1);
  97. if($ax.event.mouseOverIds.indexOf(id) == -1) $ax.style.SetWidgetHover(id, false);
  98. };
  99. $ax.style.ObjHasMouseDown = function (id) {
  100. return _widgetHasState(id, MOUSE_DOWN);
  101. };
  102. // checkMouseOver is used for applying style effects to everything in a group
  103. $ax.style.SetWidgetMouseDown = function(id, value, checkMouseOver) {
  104. if($ax.style.IsWidgetDisabled(id)) return;
  105. if(!_widgetHasState(id, MOUSE_DOWN)) return;
  106. const state = _generateFullState(id, undefined, undefined, undefined, undefined, !checkMouseOver ? true : undefined, value);
  107. _applyImageAndTextJson(id, state);
  108. _updateElementIdImageStyle(id, state);
  109. };
  110. var _generateFullState = function (id, forceFocused, forceSelected, forceDisabled, forceError, forceMouseOver, forceMouseDown) {
  111. let state = $ax.style.ShowingHint(id) ? HINT : '';
  112. if (forceError === true || forceError !== false && _style.IsWidgetError(id)) {
  113. state = _compoundStates(state, ERROR);
  114. }
  115. if (forceSelected === true || forceSelected !== false && _style.IsWidgetSelected(id)) {
  116. state = _compoundStates(state, SELECTED);
  117. }
  118. if (forceDisabled === true || forceDisabled !== false && _isWidgetDisabled(id)) {
  119. return _compoundStates(DISABLED, state);
  120. }
  121. if (forceFocused === true || forceFocused !== false && _hasAnyFocusedClass(id)) {
  122. return _compoundStates(state, FOCUSED);
  123. }
  124. if (forceMouseDown === true || forceMouseDown !== false && $ax.event.mouseDownObjectId == id) {
  125. state = _compoundStates(state, MOUSE_DOWN);
  126. }
  127. if (forceMouseOver === true || forceMouseOver !== false &&
  128. ($ax.event.mouseOverIds.indexOf(id) !== -1 && _widgetHasState(id, MOUSE_OVER) || _isRolloverOverride(id))) {
  129. return _compoundStates(state, MOUSE_OVER);
  130. }
  131. return state.length > 0 ? state : NORMAL;
  132. };
  133. var _compoundStates = function (current, baseState) {
  134. if (current.length < 1) return baseState;
  135. if (baseState.length < 1) return current;
  136. const capital = current.charAt(0).toUpperCase() + current.slice(1);
  137. return baseState + capital;
  138. };
  139. $ax.style.updateImage = function (id) {
  140. const state = $ax.style.generateState(id);
  141. const imageUrl = $ax.adaptive.getImageForStateAndView(id, state);
  142. if (imageUrl) _applyImage(id, imageUrl, state);
  143. $ax.style.updateElementIdImageStyle(id, state);
  144. }
  145. $ax.style.SetWidgetFocused = function (id, value) {
  146. if (_isWidgetDisabled(id)) return;
  147. if (!_widgetHasState(id, FOCUSED)) return;
  148. const state = _generateFullState(id, value);
  149. _applyImageAndTextJson(id, state);
  150. _updateElementIdImageStyle(id, state);
  151. }
  152. $ax.style.SetWidgetSelected = function(id, value, alwaysApply) {
  153. if(_isWidgetDisabled(id)) return;
  154. //NOTE: not firing select events if state didn't change
  155. const raiseSelectedEvents = $ax.style.IsWidgetSelected(id) != value;
  156. if(value) {
  157. var group = $('#' + id).attr('selectiongroup');
  158. if(group) {
  159. $("[selectiongroup='" + group + "']").each(function() {
  160. var otherId = this.id;
  161. if(otherId == id) return;
  162. if ($ax.visibility.isScriptIdLimbo($ax.repeater.getScriptIdFromElementId(otherId))) return;
  163. $ax.style.SetWidgetSelected(otherId, false, alwaysApply);
  164. });
  165. }
  166. }
  167. var obj = $obj(id);
  168. if(obj) {
  169. // Lets remove 'selected' css class independently of object type (dynamic panel, layer or simple rectangle). See RP-1559
  170. if (!value) $jobj(id).removeClass(SELECTED);
  171. var actionId = id;
  172. if ($ax.public.fn.IsDynamicPanel(obj.type) || $ax.public.fn.IsLayer(obj.type)) {
  173. var children = $axure('#' + id).getChildren()[0].children;
  174. var skipIds = new Set();
  175. for(var i = 0; i < children.length; i++) {
  176. var childId = children[i];
  177. // only set one member of selection group in children selected since subsequent calls
  178. // will unselect the previous one anyway
  179. if(value) {
  180. if(skipIds.has(childId)) continue;
  181. var group = $('#' + childId).attr('selectiongroup');
  182. if(group) for (var item of $("[selectiongroup='" + group + "']")) skipIds.add(item.id);
  183. }
  184. // Special case for trees
  185. var childObj = $jobj(childId);
  186. if(childObj.hasClass('treeroot')) {
  187. var treenodes = childObj.find('.treenode');
  188. for(var j = 0; j < treenodes.length; j++) {
  189. $axure('#' + treenodes[j].id).selected(value);
  190. }
  191. } else $axure('#' + childId).selected(value);
  192. }
  193. } else {
  194. const widgetHasSelectedState = _widgetHasState(id, SELECTED);
  195. while(obj.isContained && !widgetHasSelectedState) obj = obj.parent;
  196. var itemId = $ax.repeater.getItemIdFromElementId(id);
  197. var path = $ax.getPathFromScriptId($ax.repeater.getScriptIdFromElementId(id));
  198. path[path.length - 1] = obj.id;
  199. actionId = $ax.getElementIdFromPath(path, { itemNum: itemId });
  200. if(alwaysApply || widgetHasSelectedState) {
  201. const state = _generateFullState(actionId, undefined, value);
  202. _applyImageAndTextJson(actionId, state);
  203. _updateElementIdImageStyle(actionId, state);
  204. }
  205. //added actionId and this hacky logic because we set style state on child, but interaction on parent
  206. //then the id saved in _selectedWidgets would be depended on widgetHasSelectedState... more see case 1818143
  207. while(obj.isContained && !$ax.getObjectFromElementId(id).interactionMap) obj = obj.parent;
  208. path = $ax.getPathFromScriptId($ax.repeater.getScriptIdFromElementId(id));
  209. path[path.length - 1] = obj.id;
  210. actionId = $ax.getElementIdFromPath(path, { itemNum: itemId });
  211. }
  212. }
  213. // ApplyImageAndTextJson(id, value ? 'selected' : 'normal');
  214. _selectedWidgets[id] = value;
  215. if(raiseSelectedEvents) $ax.event.raiseSelectedEvents(actionId, value);
  216. };
  217. $ax.style.IsWidgetSelected = function(id) {
  218. return Boolean(_selectedWidgets[id] || _hasAnySelectedClass(id));
  219. };
  220. $ax.style.SetWidgetEnabled = function(id, value) {
  221. _disabledWidgets[id] = !value;
  222. $('#' + id).find('a').css('cursor', value ? 'pointer' : 'default');
  223. if(!_widgetHasState(id, DISABLED)) return;
  224. if(!value) {
  225. const state = _generateFullState(id, undefined, undefined, true);
  226. _applyImageAndTextJson(id, state);
  227. _updateElementIdImageStyle(id, state);
  228. } else $ax.style.SetWidgetSelected(id, $ax.style.IsWidgetSelected(id), true);
  229. };
  230. $ax.style.IsWidgetError = function (id) {
  231. return Boolean(_errorWidgets[id] || _hasAnyErrorClass(id));
  232. };
  233. $ax.style.SetWidgetError = function (id, value) {
  234. if(_isWidgetDisabled(id)) return;
  235. var raiseErrorEvents = $ax.style.IsWidgetError(id) != value;
  236. _errorWidgets[id] = value;
  237. if(raiseErrorEvents) $ax.event.raiseErrorEvents(id, value);
  238. if(!_widgetHasState(id, ERROR) && !_hasAnyErrorClass(id)) return;
  239. const state = _generateFullState(id, undefined, undefined, undefined, value);
  240. _applyImageAndTextJson(id, state);
  241. _updateElementIdImageStyle(id, state);
  242. }
  243. $ax.style.ShowingHint = function(id) {
  244. return _hintWidgets[id] === true;
  245. };
  246. $ax.style.SetWidgetPlaceholder = function(id, active, text, password) {
  247. _hintWidgets[id] = active && text && text.length > 0;
  248. const state = _generateState(id);
  249. const inputId = $ax.repeater.applySuffixToElementId(id, '_input');
  250. const obj = $jobj(inputId);
  251. if(!active) {
  252. try { //ie8 and below error
  253. if(password) document.getElementById(inputId).type = 'password';
  254. } catch(e) { }
  255. } else {
  256. try { //ie8 and below error
  257. if(password && text) document.getElementById(inputId).type = 'text';
  258. } catch(e) { }
  259. }
  260. obj.val(text);
  261. const style = _computeAllOverrides(id, undefined, state, $ax.adaptive.currentViewId);
  262. if(!$.isEmptyObject(style)) _applyTextStyle(inputId, style);
  263. _updateStateClasses(
  264. [
  265. id,
  266. $ax.repeater.applySuffixToElementId(id, '_div'),
  267. inputId
  268. ], state, true
  269. );
  270. };
  271. var _isWidgetDisabled = $ax.style.IsWidgetDisabled = function(id) {
  272. return Boolean(_disabledWidgets[id]);
  273. };
  274. var _elementIdsToImageOverrides = {};
  275. $ax.style.mapElementIdToImageOverrides = function (elementId, override) {
  276. for(var key in override) _addImageOverride(elementId, key, override[key]);
  277. };
  278. var _addImageOverride = function (elementId, state, val) {
  279. if (!_elementIdsToImageOverrides[elementId]) _elementIdsToImageOverrides[elementId] = {};
  280. _elementIdsToImageOverrides[elementId][state] = val;
  281. }
  282. $ax.style.deleteElementIdToImageOverride = function(elementId) {
  283. delete _elementIdsToImageOverrides[elementId];
  284. };
  285. $ax.style.getElementImageOverride = function(elementId, state) {
  286. var url = _elementIdsToImageOverrides[elementId] && _elementIdsToImageOverrides[elementId][state];
  287. return url;
  288. };
  289. $ax.style.elementHasAnyImageOverride = function(elementId) {
  290. return Boolean(_elementIdsToImageOverrides[elementId]);
  291. };
  292. // these camel case state names match up to generated
  293. // javascript properties such as keys for compound state images
  294. var NORMAL = 'normal';
  295. var MOUSE_OVER = 'mouseOver';
  296. var MOUSE_DOWN = 'mouseDown';
  297. var SELECTED = 'selected';
  298. var DISABLED = 'disabled';
  299. var ERROR = 'error';
  300. var HINT = 'hint';
  301. var FOCUSED = 'focused';
  302. var SELECTED_ERROR = 'selectedError';
  303. var SELECTED_HINT = 'selectedHint';
  304. var SELECTED_ERROR_HINT = 'selectedErrorHint';
  305. var ERROR_HINT = 'errorHint';
  306. var MOUSE_OVER_MOUSE_DOWN = 'mouseOverMouseDown';
  307. var MOUSE_OVER_SELECTED = 'mouseOverSelected';
  308. var MOUSE_OVER_ERROR = 'mouseOverError';
  309. var MOUSE_OVER_HINT = 'mouseOverHint';
  310. var MOUSE_OVER_SELECTED_ERROR = 'mouseOverSelectedError';
  311. var MOUSE_OVER_SELECTED_HINT = 'mouseOverSelectedHint';
  312. var MOUSE_OVER_SELECTED_ERROR_HINT = 'mouseOverSelectedErrorHint';
  313. var MOUSE_OVER_ERROR_HINT = 'mouseOverErrorHint';
  314. var MOUSE_DOWN_SELECTED = 'mouseDownSelected';
  315. var MOUSE_DOWN_ERROR = 'mouseDownError';
  316. var MOUSE_DOWN_HINT = 'mouseDownHint';
  317. var MOUSE_DOWN_SELECTED_ERROR = 'mouseDownSelectedError';
  318. var MOUSE_DOWN_SELECTED_HINT = 'mouseDownSelectedHint';
  319. var MOUSE_DOWN_SELECTED_ERROR_HINT = 'mouseDownSelectedErrorHint';
  320. var MOUSE_DOWN_ERROR_HINT = 'mouseDownErrorHint';
  321. var MOUSE_OVER_MOUSE_DOWN_SELECTED = 'mouseOverMouseDownSelected';
  322. var MOUSE_OVER_MOUSE_DOWN_ERROR = 'mouseOverMouseDownError';
  323. var MOUSE_OVER_MOUSE_DOWN_HINT = 'MouseOverMouseDownHint';
  324. var MOUSE_OVER_MOUSE_DOWN_SELECTED_ERROR = 'mouseOverMouseDownSelectedError';
  325. var MOUSE_OVER_MOUSE_DOWN_SELECTED_HINT = 'mouseOverMouseDownSelectedHint';
  326. var MOUSE_OVER_MOUSE_DOWN_SELECTED_ERROR_HINT = 'mouseOverMouseDownSelectedErrorHint';
  327. var MOUSE_OVER_MOUSE_DOWN_ERROR_HINT = 'mouseOverMouseDownErrorHint';
  328. var FOCUSED_SELECTED = 'focusedSelected';
  329. var FOCUSED_ERROR = 'focusedError';
  330. var FOCUSED_HINT = 'focusedHint';
  331. var FOCUSED_SELECTED_ERROR = 'focusedSelectedError';
  332. var FOCUSED_SELECTED_HINT = 'focusedSelectedHint';
  333. var FOCUSED_SELECTED_ERROR_HINT = 'focusedSelectedErrorHint';
  334. var FOCUSED_ERROR_HINT = 'focusedErrorHint';
  335. var HINT_DISABLED = 'hintDisabled';
  336. var SELECTED_DISABLED = 'selectedDisabled';
  337. var ERROR_DISABLED = 'errorDisabled';
  338. var SELECTED_HINT_DISABLED = 'selectedHintDisabled';
  339. var ERROR_HINT_DISABLED = 'errorHintDisabled';
  340. var SELECTED_ERROR_DISABLED = 'selectedErrorDisabled';
  341. var SELECTED_ERROR_HINT_DISABLED = 'selectedErrorHintDisabled';
  342. // Compound states are applied with multiple classes
  343. // #u0.mouseOver.mouseDown.Selected.Error in .css
  344. // class="mouseOver mouseDown selected error" in .html
  345. var ALL_STATES_WITH_CSS_CLASS = [
  346. MOUSE_OVER,
  347. MOUSE_DOWN,
  348. SELECTED,
  349. DISABLED,
  350. ERROR,
  351. HINT,
  352. FOCUSED
  353. ];
  354. var _stateHasFocused = function (state) {
  355. return state == FOCUSED
  356. || state == FOCUSED_SELECTED
  357. || state == FOCUSED_ERROR
  358. || state == FOCUSED_HINT
  359. || state == FOCUSED_SELECTED_ERROR
  360. || state == FOCUSED_SELECTED_HINT
  361. || state == FOCUSED_SELECTED_ERROR_HINT
  362. || state == FOCUSED_ERROR_HINT;
  363. };
  364. var _hasAnyFocusedClass = _style.HasAnyFocusedClass = function (id) {
  365. const jobj = $('#' + id);
  366. return jobj.hasClass(FOCUSED);
  367. };
  368. var _stateHasHint = function (state) {
  369. return state == HINT
  370. || state == SELECTED_HINT
  371. || state == SELECTED_ERROR_HINT
  372. || state == ERROR_HINT
  373. || state == MOUSE_OVER_HINT
  374. || state == MOUSE_OVER_SELECTED_HINT
  375. || state == MOUSE_OVER_SELECTED_ERROR_HINT
  376. || state == MOUSE_OVER_ERROR_HINT
  377. || state == MOUSE_DOWN_HINT
  378. || state == MOUSE_DOWN_SELECTED_HINT
  379. || state == MOUSE_DOWN_SELECTED_ERROR_HINT
  380. || state == MOUSE_DOWN_ERROR_HINT
  381. || state == MOUSE_OVER_MOUSE_DOWN_HINT
  382. || state == MOUSE_OVER_MOUSE_DOWN_SELECTED_HINT
  383. || state == MOUSE_OVER_MOUSE_DOWN_SELECTED_ERROR_HINT
  384. || state == MOUSE_OVER_MOUSE_DOWN_ERROR_HINT
  385. || state == FOCUSED_HINT
  386. || state == FOCUSED_SELECTED_HINT
  387. || state == FOCUSED_SELECTED_ERROR_HINT
  388. || state == FOCUSED_ERROR_HINT
  389. || state == HINT_DISABLED
  390. || state == SELECTED_HINT_DISABLED
  391. || state == ERROR_HINT_DISABLED
  392. || state == SELECTED_ERROR_HINT_DISABLED;
  393. };
  394. var _stateHasError = function (state) {
  395. return state == ERROR
  396. || state == SELECTED_ERROR
  397. || state == SELECTED_ERROR_HINT
  398. || state == ERROR_HINT
  399. || state == MOUSE_OVER_ERROR
  400. || state == MOUSE_OVER_SELECTED_ERROR
  401. || state == MOUSE_OVER_SELECTED_ERROR_HINT
  402. || state == MOUSE_OVER_ERROR_HINT
  403. || state == MOUSE_DOWN_ERROR
  404. || state == MOUSE_DOWN_SELECTED_ERROR
  405. || state == MOUSE_DOWN_SELECTED_ERROR_HINT
  406. || state == MOUSE_DOWN_ERROR_HINT
  407. || state == MOUSE_OVER_MOUSE_DOWN_ERROR
  408. || state == MOUSE_OVER_MOUSE_DOWN_SELECTED_ERROR
  409. || state == MOUSE_OVER_MOUSE_DOWN_SELECTED_ERROR_HINT
  410. || state == MOUSE_OVER_MOUSE_DOWN_ERROR_HINT
  411. || state == FOCUSED_ERROR
  412. || state == FOCUSED_SELECTED_ERROR
  413. || state == FOCUSED_SELECTED_ERROR_HINT
  414. || state == FOCUSED_ERROR_HINT
  415. || state == ERROR_DISABLED
  416. || state == ERROR_HINT_DISABLED
  417. || state == SELECTED_ERROR_DISABLED
  418. || state == SELECTED_ERROR_HINT_DISABLED;
  419. };
  420. var _hasAnyErrorClass = _style.HasAnyErrorClass = function (id) {
  421. const jobj = $('#' + id);
  422. return jobj.hasClass(ERROR);
  423. };
  424. var _stateHasDisabled = _style.StateHasDisabled = function (state) {
  425. return state == DISABLED
  426. || state == HINT_DISABLED
  427. || state == SELECTED_DISABLED
  428. || state == ERROR_DISABLED
  429. || state == SELECTED_HINT_DISABLED
  430. || state == ERROR_HINT_DISABLED
  431. || state == SELECTED_ERROR_DISABLED
  432. || state == SELECTED_ERROR_HINT_DISABLED;
  433. };
  434. var _hasAnyDisabledClass = _style.HasAnyDisabledClass = function (id) {
  435. const jobj = $('#' + id);
  436. return jobj.hasClass(DISABLED);
  437. };
  438. var _stateHasSelected = _style.StateHasSelected = function (state) {
  439. return state == SELECTED
  440. || state == SELECTED_ERROR
  441. || state == SELECTED_HINT
  442. || state == SELECTED_ERROR_HINT
  443. || state == MOUSE_OVER_SELECTED
  444. || state == MOUSE_OVER_SELECTED_ERROR
  445. || state == MOUSE_OVER_SELECTED_HINT
  446. || state == MOUSE_OVER_SELECTED_ERROR_HINT
  447. || state == MOUSE_DOWN_SELECTED
  448. || state == MOUSE_DOWN_SELECTED_ERROR
  449. || state == MOUSE_DOWN_SELECTED_HINT
  450. || state == MOUSE_DOWN_SELECTED_ERROR_HINT
  451. || state == MOUSE_OVER_MOUSE_DOWN_SELECTED
  452. || state == MOUSE_OVER_MOUSE_DOWN_SELECTED_ERROR
  453. || state == MOUSE_OVER_MOUSE_DOWN_SELECTED_HINT
  454. || state == MOUSE_OVER_MOUSE_DOWN_SELECTED_ERROR_HINT
  455. || state == FOCUSED_SELECTED
  456. || state == FOCUSED_SELECTED_ERROR
  457. || state == FOCUSED_SELECTED_HINT
  458. || state == FOCUSED_SELECTED_ERROR_HINT
  459. || state == SELECTED_DISABLED
  460. || state == SELECTED_HINT_DISABLED
  461. || state == SELECTED_ERROR_DISABLED
  462. || state == SELECTED_ERROR_HINT_DISABLED;
  463. };
  464. var _hasAnySelectedClass = _style.HasAnySelectedClass = function (id) {
  465. const jobj = $('#' + id);
  466. return jobj.hasClass(SELECTED);
  467. };
  468. var _removeAnySelectedClass = _style.RemoveAnySelectedClass = function (id) {
  469. const jobj = $('#' + id);
  470. jobj.removeClass(SELECTED);
  471. };
  472. var _stateHasMouseOver = function (state) {
  473. return state == MOUSE_OVER
  474. || state == MOUSE_OVER_MOUSE_DOWN
  475. || state == MOUSE_OVER_SELECTED
  476. || state == MOUSE_OVER_ERROR
  477. || state == MOUSE_OVER_HINT
  478. || state == MOUSE_OVER_SELECTED_ERROR
  479. || state == MOUSE_OVER_SELECTED_HINT
  480. || state == MOUSE_OVER_SELECTED_ERROR_HINT
  481. || state == MOUSE_OVER_ERROR_HINT
  482. || state == MOUSE_OVER_MOUSE_DOWN_SELECTED
  483. || state == MOUSE_OVER_MOUSE_DOWN_ERROR
  484. || state == MOUSE_OVER_MOUSE_DOWN_HINT
  485. || state == MOUSE_OVER_MOUSE_DOWN_SELECTED_ERROR
  486. || state == MOUSE_OVER_MOUSE_DOWN_SELECTED_HINT
  487. || state == MOUSE_OVER_MOUSE_DOWN_SELECTED_ERROR_HINT
  488. || state == MOUSE_OVER_MOUSE_DOWN_ERROR_HINT;
  489. };
  490. var _stateHasMouseDown = function (state) {
  491. return state == MOUSE_DOWN
  492. || state == MOUSE_OVER_MOUSE_DOWN
  493. || state == MOUSE_DOWN_SELECTED
  494. || state == MOUSE_DOWN_ERROR
  495. || state == MOUSE_DOWN_HINT
  496. || state == MOUSE_DOWN_SELECTED_ERROR
  497. || state == MOUSE_DOWN_SELECTED_HINT
  498. || state == MOUSE_DOWN_SELECTED_ERROR_HINT
  499. || state == MOUSE_DOWN_ERROR_HINT
  500. || state == MOUSE_OVER_MOUSE_DOWN_SELECTED
  501. || state == MOUSE_OVER_MOUSE_DOWN_ERROR
  502. || state == MOUSE_OVER_MOUSE_DOWN_HINT
  503. || state == MOUSE_OVER_MOUSE_DOWN_SELECTED_ERROR
  504. || state == MOUSE_OVER_MOUSE_DOWN_SELECTED_HINT
  505. || state == MOUSE_OVER_MOUSE_DOWN_SELECTED_ERROR_HINT
  506. || state == MOUSE_OVER_MOUSE_DOWN_ERROR_HINT;
  507. };
  508. var _generateState = _style.generateState = function (id) {
  509. return _generateFullState(id);
  510. };
  511. // we need this for when we are looking for the correct image to apply
  512. // it tells us what image override to try to apply if it exists
  513. var _highestPriorityBaseState = _style.highestPriorityBaseState = function (state) {
  514. if (state == SELECTED_ERROR) return ERROR;
  515. if (state == SELECTED_HINT) return HINT;
  516. if (state == SELECTED_ERROR_HINT) return HINT;
  517. if (state == ERROR_HINT) return HINT;
  518. if (state == MOUSE_OVER_MOUSE_DOWN) return MOUSE_DOWN;
  519. if (state == MOUSE_OVER_SELECTED) return SELECTED;
  520. if (state == MOUSE_OVER_ERROR) return ERROR;
  521. if (state == MOUSE_OVER_HINT) return HINT;
  522. if (state == MOUSE_OVER_SELECTED_ERROR) return ERROR;
  523. if (state == MOUSE_OVER_SELECTED_HINT) return HINT;
  524. if (state == MOUSE_OVER_SELECTED_ERROR_HINT) return HINT;
  525. if (state == MOUSE_OVER_ERROR_HINT) return HINT;
  526. if (state == MOUSE_DOWN_SELECTED) return SELECTED;
  527. if (state == MOUSE_DOWN_ERROR) return ERROR;
  528. if (state == MOUSE_DOWN_HINT) return HINT;
  529. if (state == MOUSE_DOWN_SELECTED_ERROR) return ERROR;
  530. if (state == MOUSE_DOWN_SELECTED_HINT) return HINT;
  531. if (state == MOUSE_DOWN_SELECTED_ERROR_HINT) return HINT;
  532. if (state == MOUSE_DOWN_ERROR_HINT) return HINT;
  533. if (state == MOUSE_OVER_MOUSE_DOWN_SELECTED) return SELECTED;
  534. if (state == MOUSE_OVER_MOUSE_DOWN_ERROR) return ERROR;
  535. if (state == MOUSE_OVER_MOUSE_DOWN_HINT) return HINT;
  536. if (state == MOUSE_OVER_MOUSE_DOWN_SELECTED_ERROR) return ERROR;
  537. if (state == MOUSE_OVER_MOUSE_DOWN_SELECTED_HINT) return HINT;
  538. if (state == MOUSE_OVER_MOUSE_DOWN_SELECTED_ERROR_HINT) return HINT;
  539. if (state == MOUSE_OVER_MOUSE_DOWN_ERROR_HINT) return HINT;
  540. if (state == FOCUSED_SELECTED) return SELECTED;
  541. if (state == FOCUSED_ERROR) return ERROR;
  542. if (state == FOCUSED_HINT) return HINT;
  543. if (state == FOCUSED_SELECTED_ERROR) return ERROR;
  544. if (state == FOCUSED_SELECTED_HINT) return HINT;
  545. if (state == FOCUSED_SELECTED_ERROR_HINT) return HINT;
  546. if (state == FOCUSED_ERROR_HINT) return HINT;
  547. if (state == HINT_DISABLED) return DISABLED;
  548. if (state == SELECTED_DISABLED) return DISABLED;
  549. if (state == ERROR_DISABLED) return DISABLED;
  550. if (state == SELECTED_HINT_DISABLED) return DISABLED;
  551. if (state == ERROR_HINT_DISABLED) return DISABLED;
  552. if (state == SELECTED_ERROR_DISABLED) return DISABLED;
  553. if (state == SELECTED_ERROR_HINT_DISABLED) return DISABLED;
  554. return state;
  555. };
  556. // we need this for when we are looking for the correct image to apply
  557. var _decomposeState = _style.decomposeState = function(state) {
  558. if(state == NORMAL) return false;
  559. if(state == SELECTED_ERROR) return SELECTED;
  560. if(state == SELECTED_HINT) return SELECTED;
  561. if(state == SELECTED_ERROR_HINT) return SELECTED_ERROR;
  562. if(state == ERROR_HINT) return ERROR;
  563. if(state == MOUSE_OVER_MOUSE_DOWN) return MOUSE_OVER;
  564. if(state == MOUSE_OVER_SELECTED) return MOUSE_OVER;
  565. if(state == MOUSE_OVER_ERROR) return MOUSE_OVER;
  566. if(state == MOUSE_OVER_HINT) return MOUSE_OVER;
  567. if(state == MOUSE_OVER_SELECTED_ERROR) return MOUSE_OVER_SELECTED;
  568. if(state == MOUSE_OVER_SELECTED_HINT) return MOUSE_OVER_SELECTED;
  569. if(state == MOUSE_OVER_SELECTED_ERROR_HINT) return MOUSE_OVER_SELECTED_ERROR;
  570. if(state == MOUSE_OVER_ERROR_HINT) return MOUSE_OVER_ERROR;
  571. if(state == MOUSE_DOWN_SELECTED) return MOUSE_DOWN;
  572. if(state == MOUSE_DOWN_ERROR) return MOUSE_DOWN;
  573. if(state == MOUSE_DOWN_HINT) return MOUSE_DOWN;
  574. if(state == MOUSE_DOWN_SELECTED_ERROR) return MOUSE_DOWN_SELECTED;
  575. if(state == MOUSE_DOWN_SELECTED_HINT) return MOUSE_DOWN_SELECTED;
  576. if(state == MOUSE_DOWN_SELECTED_ERROR_HINT) return MOUSE_DOWN_SELECTED_ERROR;
  577. if(state == MOUSE_DOWN_ERROR_HINT) return MOUSE_DOWN_ERROR;
  578. if(state == MOUSE_OVER_MOUSE_DOWN_SELECTED) return MOUSE_OVER_MOUSE_DOWN;
  579. if(state == MOUSE_OVER_MOUSE_DOWN_ERROR) return MOUSE_OVER_MOUSE_DOWN;
  580. if(state == MOUSE_OVER_MOUSE_DOWN_HINT) return MOUSE_OVER_MOUSE_DOWN;
  581. if(state == MOUSE_OVER_MOUSE_DOWN_SELECTED_ERROR) return MOUSE_OVER_MOUSE_DOWN_SELECTED;
  582. if(state == MOUSE_OVER_MOUSE_DOWN_SELECTED_HINT) return MOUSE_OVER_MOUSE_DOWN_SELECTED;
  583. if(state == MOUSE_OVER_MOUSE_DOWN_SELECTED_ERROR_HINT) return MOUSE_OVER_MOUSE_DOWN_SELECTED_ERROR;
  584. if(state == MOUSE_OVER_MOUSE_DOWN_ERROR_HINT) return MOUSE_OVER_MOUSE_DOWN_ERROR;
  585. if(state == FOCUSED_SELECTED) return FOCUSED;
  586. if(state == FOCUSED_ERROR) return FOCUSED;
  587. if(state == FOCUSED_HINT) return FOCUSED;
  588. if(state == FOCUSED_SELECTED_ERROR) return FOCUSED_SELECTED;
  589. if(state == FOCUSED_SELECTED_HINT) return FOCUSED_SELECTED;
  590. if(state == FOCUSED_SELECTED_ERROR_HINT) return FOCUSED_SELECTED_ERROR;
  591. if(state == FOCUSED_ERROR_HINT) return FOCUSED_ERROR;
  592. if (state == HINT_DISABLED) return HINT;
  593. if (state == SELECTED_DISABLED) return SELECTED;
  594. if (state == ERROR_DISABLED) return ERROR;
  595. if (state == SELECTED_HINT_DISABLED) return SELECTED_HINT;
  596. if (state == ERROR_HINT_DISABLED) return ERROR_HINT;
  597. if (state == SELECTED_ERROR_DISABLED) return SELECTED_ERROR;
  598. if (state == SELECTED_ERROR_HINT_DISABLED) return SELECTED_ERROR_HINT;
  599. return NORMAL;
  600. };
  601. var _updateElementIdImageStyle = _style.updateElementIdImageStyle = function(elementId, state) {
  602. if(!_style.elementHasAnyImageOverride(elementId)) return;
  603. if(!state) state = _generateState(elementId);
  604. var style = _computeFullStyle(elementId, state, $ax.adaptive.currentViewId);
  605. var query = $jobj($ax.repeater.applySuffixToElementId(elementId, '_img'));
  606. style.size.width = query.width();
  607. style.size.height = query.height();
  608. var borderId = $ax.repeater.applySuffixToElementId(elementId, '_border');
  609. var borderQuery = $jobj(borderId);
  610. if(!borderQuery.length) {
  611. borderQuery = $('<div></div>');
  612. borderQuery.attr('id', borderId);
  613. query.after(borderQuery);
  614. }
  615. borderQuery.attr('style', '');
  616. //borderQuery.css('position', 'absolute');
  617. query.attr('style', '');
  618. var borderQueryCss = { 'position': 'absolute' };
  619. var queryCss = {}
  620. var borderWidth = Number(style.borderWidth);
  621. var hasBorderWidth = borderWidth > 0;
  622. if(hasBorderWidth) {
  623. //borderQuery.css('border-style', 'solid');
  624. //borderQuery.css('border-width', borderWidth + 'px'); // If images start being able to turn off borders on specific sides, need to update this.
  625. //borderQuery.css('width', style.size.width - borderWidth * 2);
  626. //borderQuery.css('height', style.size.height - borderWidth * 2);
  627. //borderQuery.css({
  628. // 'border-style': 'solid',
  629. // 'border-width': borderWidth + 'px',
  630. // 'width': style.size.width - borderWidth * 2,
  631. // 'height': style.size.height - borderWidth * 2
  632. //});
  633. borderQueryCss['border-style'] = 'solid';
  634. borderQueryCss['border-width'] = borderWidth + 'px'; // If images start being able to turn off borders on specific sides, need to update this.
  635. borderQueryCss['width'] = style.size.width - borderWidth * 2;
  636. borderQueryCss['height'] = style.size.height - borderWidth * 2;
  637. }
  638. var linePattern = style.linePattern;
  639. if(hasBorderWidth && linePattern) borderQueryCss['border-style'] = linePattern;
  640. var borderFill = style.borderFill;
  641. if(hasBorderWidth && borderFill) {
  642. var color = borderFill.fillType == 'solid' ? borderFill.color :
  643. borderFill.fillType == 'linearGradient' ? borderFill.colors[0].color : 0;
  644. var alpha = Math.floor(color / 256 / 256 / 256);
  645. color -= alpha * 256 * 256 * 256;
  646. alpha = alpha / 255;
  647. var red = Math.floor(color / 256 / 256);
  648. color -= red * 256 * 256;
  649. var green = Math.floor(color / 256);
  650. var blue = color - green * 256;
  651. borderQueryCss['border-color'] = _rgbaToFunc(red, green, blue, alpha);
  652. }
  653. var cornerRadiusTopLeft = style.cornerRadius;
  654. if(cornerRadiusTopLeft) {
  655. queryCss['border-radius'] = cornerRadiusTopLeft + 'px';
  656. borderQueryCss['border-radius'] = cornerRadiusTopLeft + 'px';
  657. }
  658. var outerShadow = style.outerShadow;
  659. if(outerShadow && outerShadow.on) {
  660. var arg = '';
  661. arg += outerShadow.offsetX + 'px' + ' ' + outerShadow.offsetY + 'px' + ' ';
  662. var rgba = outerShadow.color;
  663. arg += outerShadow.blurRadius + 'px' + ' 0px ' + _rgbaToFunc(rgba.r, rgba.g, rgba.b, rgba.a);
  664. //query.css('-moz-box-shadow', arg);
  665. //query.css('-wibkit-box-shadow', arg);
  666. //query.css('box-shadow', arg);
  667. //query.css('left', '0px');
  668. //query.css('top', '0px');
  669. //query.css({
  670. // '-moz-box-shadow': arg,
  671. // '-webkit-box-shadow': arg,
  672. // 'box-shadow': arg,
  673. // 'left': '0px',
  674. // 'top': '0px'
  675. //});
  676. queryCss['-moz-box-shadow'] = arg;
  677. queryCss['-wibkit-box-shadow'] = arg;
  678. queryCss['box-shadow'] = arg;
  679. queryCss['left'] = '0px';
  680. queryCss['top'] = '0px';
  681. }
  682. queryCss['width'] = style.size.width;
  683. queryCss['height'] = style.size.height;
  684. borderQuery.css(borderQueryCss);
  685. query.css(queryCss);
  686. //query.css({ width: style.size.width, height: style.size.height });
  687. };
  688. var _rgbaToFunc = function(red, green, blue, alpha) {
  689. return 'rgba(' + red + ',' + green + ',' + blue + ',' + alpha + ')';
  690. };
  691. var _applyImageAndTextJson = function(id, event) {
  692. const textId = $ax.GetTextPanelId(id);
  693. if(textId) _resetTextJson(id, textId);
  694. const imageUrl = $ax.adaptive.getImageForStateAndView(id, event);
  695. if(imageUrl) _applyImage(id, imageUrl, event);
  696. if (textId) {
  697. const overridedStyle = _computeAllOverrides(id, undefined, event, $ax.adaptive.currentViewId);
  698. var borderElement = document.getElementById(id + '_div');
  699. var textElement = document.getElementById(textId);
  700. if (!$.isEmptyObject(overridedStyle)) {
  701. var diagramObject = $ax.getObjectFromElementId(id);
  702. var fullStyle = _computeFullStyle(id, event, $ax.adaptive.currentViewId, overridedStyle);
  703. var padding = { top: 0, right: 0, bottom: 0, left: 0 };
  704. if (fullStyle.paddingTop) padding.top = +fullStyle.paddingTop;
  705. if (fullStyle.paddingBottom) padding.bottom = +fullStyle.paddingBottom;
  706. if (fullStyle.paddingLeft) padding.left = +fullStyle.paddingLeft;
  707. if (fullStyle.paddingRight) padding.right = +fullStyle.paddingRight;
  708. var newSize = _applyTextStyle(textId, overridedStyle, padding);
  709. if (borderElement && textElement && (diagramObject.autoFitHeight || diagramObject.autoFitWidth)) {
  710. if (diagramObject.autoFitHeight) {
  711. var height = newSize.height;
  712. borderElement.style.height = height + 'px';
  713. textElement.style.top = 0;
  714. }
  715. if (diagramObject.autoFitWidth) {
  716. var width = newSize.width;
  717. borderElement.style.width = width + 'px';
  718. textElement.style.left = 0;
  719. }
  720. }
  721. } else if (borderElement && textElement) {
  722. var parentElement = document.getElementById(id);
  723. if (parentElement) {
  724. borderElement.style.height = parentElement.style.height;
  725. borderElement.style.width = parentElement.style.width;
  726. }
  727. textElement.style.top = '';
  728. textElement.style.left = '';
  729. }
  730. }
  731. _updateStateClasses(
  732. [
  733. id,
  734. $ax.repeater.applySuffixToElementId(id, '_div'),
  735. $ax.repeater.applySuffixToElementId(id, '_input')
  736. ], event, true
  737. );
  738. };
  739. let _updateStateClasses = function(ids, event, addMouseOverOnMouseDown) {
  740. for(let i = 0; i < ids.length; i++) {
  741. _updateStateClassesHelper(ids[i], event, addMouseOverOnMouseDown);
  742. }
  743. };
  744. let _updateStateClassesHelper = function(id, event, addMouseOverOnMouseDown) {
  745. const jobj = $jobj(id);
  746. const isMouseDownEvent = _stateHasMouseDown(event);
  747. for (let i = 0; i < ALL_STATES_WITH_CSS_CLASS.length; i++) jobj.removeClass(ALL_STATES_WITH_CSS_CLASS[i]);
  748. if (addMouseOverOnMouseDown && isMouseDownEvent || _stateHasMouseOver(event)) jobj.addClass(MOUSE_OVER);
  749. if (isMouseDownEvent) jobj.addClass(MOUSE_DOWN);
  750. if (_stateHasFocused(event)) jobj.addClass(FOCUSED);
  751. if (_stateHasSelected(event)) jobj.addClass(SELECTED);
  752. if (_stateHasError(event)) jobj.addClass(ERROR);
  753. if (_stateHasDisabled(event)) jobj.addClass(DISABLED);
  754. if (_stateHasHint(event)) jobj.addClass(HINT);
  755. };
  756. /* -------------------
  757. here's the algorithm in a nutshell:
  758. [DOWN] -- refers to navigation down the view inheritance heirarchy (default to most specific)
  759. [UP] -- navigate up the heirarchy
  760. ComputeAllOverrides (object):
  761. All view styles [DOWN]
  762. If hyperlink
  763. - DO ComputeStateStyle for parent object
  764. - if (MouseOver || MouseDown)
  765. - linkMouseOver Style
  766. - if (MouseDown)
  767. - linkMouseDown style
  768. - ComputeStateStyleForViewChain (parent, STATE)
  769. if (MouseDown) DO ComputeStateStyleForViewChain for object, mouseOver
  770. DO ComputeStateStyleForViewChain for object, style
  771. ComputeStateStyleForViewChain (object, STATE)
  772. FIRST STATE state style [UP] the chain OR default object STATE style
  773. ------------------- */
  774. var FONT_PROPS = {
  775. 'typeface': true,
  776. 'fontName': true,
  777. 'fontWeight': true,
  778. 'fontStyle': true,
  779. 'fontStretch': true,
  780. 'fontSize': true,
  781. 'underline': true,
  782. 'foreGroundFill': true,
  783. 'horizontalAlignment': true,
  784. 'letterCase': true,
  785. 'strikethrough': true
  786. };
  787. var _getViewIdChain = $ax.style.getViewIdChain = function(currentViewId, id, diagramObject) {
  788. var viewIdChain;
  789. if (diagramObject.owner.type == 'Axure:Master' || diagramObject.owner.type == 'referenceDiagramObject') {
  790. //set viewIdChain to the chain from the parent RDO
  791. var parentRdoId;
  792. if (diagramObject.owner.type == 'referenceDiagramObject') parentRdoId = diagramObject.owner.scriptIds[0];
  793. if (!parentRdoId) parentRdoId = $ax('#' + id).getParents(true, ['rdo'])[0][0];
  794. var rdoState = $ax.style.generateState(parentRdoId);
  795. var rdoStyle = $ax.style.computeFullStyle(parentRdoId, rdoState, currentViewId);
  796. var viewOverride = rdoStyle.viewOverride;
  797. viewIdChain = $ax.adaptive.getMasterAdaptiveIdChain(diagramObject.owner.type == 'referenceDiagramObject' ? diagramObject.owner.masterId : diagramObject.owner.packageId, viewOverride);
  798. } else {
  799. viewIdChain = $ax.adaptive.getAdaptiveIdChain(currentViewId);
  800. }
  801. return viewIdChain;
  802. }
  803. var _computeAllOverrides = $ax.style.computeAllOverrides = function(id, parentId, state, currentViewId) {
  804. var computedStyle = {};
  805. if(parentId) computedStyle = _computeAllOverrides(parentId, null, state, currentViewId);
  806. var diagramObject = $ax.getObjectFromElementId(id);
  807. var viewIdChain = _getViewIdChain(currentViewId, id, diagramObject);
  808. var excludeFont = _shapesWithSetRichText[id];
  809. for(var i = 0; i < viewIdChain.length; i++) {
  810. var viewId = viewIdChain[i];
  811. var style = diagramObject.adaptiveStyles[viewId];
  812. if(style) {
  813. // we want to exclude the normal font style for shapes where the rich text has been set with an interaction
  814. // so we copy the style so we don't modify the original, then delete all the font props.
  815. if(excludeFont) {
  816. style = $ax.deepCopy(style);
  817. for(var prop in FONT_PROPS) delete style[prop];
  818. }
  819. if(style) {
  820. var customStyle = style.baseStyle && $ax.document.stylesheet.stylesById[style.baseStyle];
  821. //make sure not to extend the customStyle this can mutate it for future use
  822. $.extend(computedStyle, customStyle);
  823. }
  824. $.extend(computedStyle, style);
  825. }
  826. }
  827. // order matters so higher priority styles override lower priority
  828. $.extend(computedStyle, _computeStateStyleForViewChain(diagramObject, NORMAL, viewIdChain, true));
  829. if (_stateHasMouseOver(state)) {
  830. $.extend(computedStyle, _computeStateStyleForViewChain(diagramObject, MOUSE_OVER, viewIdChain, true));
  831. }
  832. if (_stateHasMouseDown(state)) {
  833. $.extend(computedStyle, _computeStateStyleForViewChain(diagramObject, MOUSE_DOWN, viewIdChain, true));
  834. }
  835. if (_stateHasFocused(state)) {
  836. $.extend(computedStyle, _computeStateStyleForViewChain(diagramObject, FOCUSED, viewIdChain, true));
  837. }
  838. if (_stateHasSelected(state)) {
  839. $.extend(computedStyle, _computeStateStyleForViewChain(diagramObject, SELECTED, viewIdChain, true));
  840. }
  841. if (_stateHasError(state)) {
  842. $.extend(computedStyle, _computeStateStyleForViewChain(diagramObject, ERROR, viewIdChain, true));
  843. }
  844. if (_stateHasHint(state)) {
  845. $.extend(computedStyle, _computeStateStyleForViewChain(diagramObject, HINT, viewIdChain, true));
  846. }
  847. if (_stateHasDisabled(state)) {
  848. $.extend(computedStyle, _computeStateStyleForViewChain(diagramObject, DISABLED, viewIdChain, true));
  849. }
  850. return _removeUnsupportedProperties(computedStyle, diagramObject);
  851. };
  852. var _computeStateStyleForViewChain = function(diagramObject, state, viewIdChain, excludeNormal) {
  853. var styleObject = diagramObject;
  854. while(styleObject.isContained) styleObject = styleObject.parent;
  855. var adaptiveStyles = styleObject.adaptiveStyles;
  856. for(var i = viewIdChain.length - 1; i >= 0; i--) {
  857. var viewId = viewIdChain[i];
  858. var viewStyle = adaptiveStyles[viewId];
  859. var stateStyle = viewStyle && _getFullStateStyle(viewStyle, state, excludeNormal);
  860. if (stateStyle) return $.extend({}, stateStyle);
  861. else if (viewStyle && viewStyle.stateStyles) return {}; //stateStyles are overriden but states could be null
  862. }
  863. // 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
  864. var stateStyleFromDefault = _getFullStateStyle(styleObject.style, state, true);
  865. return $.extend({}, stateStyleFromDefault);
  866. };
  867. // returns the full effective style for an object in a state state and view
  868. var _computeFullStyle = $ax.style.computeFullStyle = function(id, state, currentViewId, overrides) {
  869. var obj = $obj(id);
  870. if (!overrides) overrides = _computeAllOverrides(id, undefined, state, currentViewId);
  871. // get style for current state
  872. var dynamicPanelStyle = _getCurrentPanelDiagramStyle(id);
  873. // todo: account for image box
  874. var objStyle = obj.style;
  875. var customStyle = objStyle.baseStyle && $ax.document.stylesheet.stylesById[objStyle.baseStyle];
  876. var returnVal = $.extend({}, $ax.document.stylesheet.defaultStyle, customStyle, objStyle, dynamicPanelStyle, overrides);
  877. return _removeUnsupportedProperties(returnVal, obj);
  878. };
  879. var _getCurrentPanelDiagramStyle = function (id) {
  880. var diagramObj = $ax.visibility.GetCurrentPanelDiagram(id);
  881. if (diagramObj) {
  882. return diagramObj.style;
  883. }
  884. return {};
  885. };
  886. var _removeUnsupportedProperties = function(style, object) {
  887. // for now all we need to do is remove padding from checkboxes and radio buttons
  888. if ($ax.public.fn.IsRadioButton(object.type) || $ax.public.fn.IsCheckBox(object.type)) {
  889. style.paddingTop = 0;
  890. style.paddingLeft = 0;
  891. style.paddingRight = 0;
  892. style.paddingBottom = 0;
  893. }
  894. if ($ax.public.fn.IsTextBox(object.type) || $ax.public.fn.IsTextArea(object.type) || $ax.public.fn.IsButton(object.type)
  895. || $ax.public.fn.IsListBox(object.type) || $ax.public.fn.IsComboBox(object.type)) {
  896. if (object.images && style.fill) delete style['fill'];
  897. }
  898. return style;
  899. };
  900. var _getFullStateStyle = function(style, state, excludeNormal) {
  901. //'normal' is needed because now DiagramObjects get their image from the Style and unapplying a rollover needs the image
  902. var stateStyle = state == NORMAL && !excludeNormal ? style : style && style.stateStyles && style.stateStyles[state];
  903. if(stateStyle) {
  904. var customStyle = stateStyle.baseStyle && $ax.document.stylesheet.stylesById[stateStyle.baseStyle];
  905. //make sure not to extend the customStyle this can mutate it for future use
  906. return $.extend({}, customStyle, stateStyle);
  907. }
  908. return undefined;
  909. };
  910. // commented this out for now... we actually will probably need it for ie
  911. var _applyOpacityFromStyle = $ax.style.applyOpacityFromStyle = function(id, style) {
  912. return;
  913. var opacity = style.opacity || '';
  914. $jobj(id).children().css('opacity', opacity);
  915. };
  916. var _initialize = function() {
  917. //$ax.style.initializeObjectTextAlignment($ax('*'));
  918. };
  919. $ax.style.initialize = _initialize;
  920. //var _initTextAlignment = function(elementId) {
  921. // var textId = $ax.GetTextPanelId(elementId);
  922. // if(textId) {
  923. // _storeIdToAlignProps(textId);
  924. // // now handle vertical alignment
  925. // if(_getObjVisible(textId)) {
  926. // //_setTextAlignment(textId, _idToAlignProps[textId], false);
  927. // _setTextAlignment(textId);
  928. // }
  929. // }
  930. //};
  931. //$ax.style.initializeObjectTextAlignment = function(query) {
  932. // query.filter(function(diagramObject) {
  933. // return $ax.public.fn.IsVector(diagramObject.type) || $ax.public.fn.IsImageBox(diagramObject.type);
  934. // }).each(function(diagramObject, elementId) {
  935. // if($jobj(elementId).length == 0) return;
  936. // _initTextAlignment(elementId);
  937. // });
  938. //};
  939. //$ax.style.initializeObjectTextAlignment = function (query) {
  940. // var textIds = [];
  941. // query.filter(function(diagramObject) {
  942. // return $ax.public.fn.IsVector(diagramObject.type) || $ax.public.fn.IsImageBox(diagramObject.type);
  943. // }).each(function(diagramObject, elementId) {
  944. // if($jobj(elementId).length == 0) return;
  945. // var textId = $ax.GetTextPanelId(elementId);
  946. // if(textId) {
  947. // _storeIdToAlignProps(textId);
  948. // textIds.push(textId);
  949. // }
  950. // });
  951. // $ax.style.setTextAlignment(textIds);
  952. //};
  953. //var _getPadding = $ax.style.getPadding = function (textId) {
  954. // var shapeId = $ax.GetShapeIdFromText(textId);
  955. // var shapeObj = $obj(shapeId);
  956. // var state = _generateState(shapeId);
  957. // var style = _computeFullStyle(shapeId, state, $ax.adaptive.currentViewId);
  958. // var vAlign = style.verticalAlignment || 'middle';
  959. // var paddingLeft = Number(style.paddingLeft) || 0;
  960. // paddingLeft += (Number(shapeObj && shapeObj.extraLeft) || 0);
  961. // var paddingTop = style.paddingTop || 0;
  962. // var paddingRight = style.paddingRight || 0;
  963. // var paddingBottom = style.paddingBottom || 0;
  964. // return { vAlign: vAlign, paddingLeft: paddingLeft, paddingTop: paddingTop, paddingRight: paddingRight, paddingBottom: paddingBottom };
  965. //}
  966. //var _storeIdToAlignProps = function(textId) {
  967. // _idToAlignProps[textId] = _getPadding(textId);
  968. //};
  969. var _applyImage = $ax.style.applyImage = function (id, imgUrl, state) {
  970. var object = $obj(id);
  971. if (object.generateCompound) {
  972. for (var i = 0; i < object.compoundChildren.length; i++) {
  973. var componentId = object.compoundChildren[i];
  974. var childId = $ax.public.fn.getComponentId(id, componentId);
  975. var childImgQuery = $jobj(childId + '_img');
  976. childImgQuery.attr('src', imgUrl[componentId]);
  977. _updateStateClasses(
  978. [
  979. childId + '_img',
  980. childId
  981. ], state, false
  982. );
  983. }
  984. } else {
  985. var imgQuery = $jobj($ax.GetImageIdFromShape(id));
  986. //it is hard to tell if setting the image or the class first causing less flashing when adding shadows.
  987. imgQuery.attr('src', imgUrl);
  988. _updateStateClasses(
  989. [
  990. id,
  991. $ax.GetImageIdFromShape(id)
  992. ], state, false
  993. );
  994. if (imgQuery.parents('a.basiclink').length > 0) imgQuery.css('border', 'none');
  995. }
  996. };
  997. $ax.public.fn.getComponentId = function (id, componentId) {
  998. var idParts = id.split('-');
  999. idParts[0] = idParts[0] + componentId;
  1000. return idParts.join('-');
  1001. }
  1002. var _resetTextJson = function(id, textid) {
  1003. // reset the opacity
  1004. $jobj(id).children().css('opacity', '');
  1005. var cacheObject = _originalTextCache[textid];
  1006. if(cacheObject) {
  1007. _transformTextWithVerticalAlignment(textid, function() {
  1008. var styleCache = cacheObject.styleCache;
  1009. var textQuery = $('#' + textid);
  1010. textQuery.find('*').each(function(index, element) {
  1011. element.style.cssText = styleCache[element.id];
  1012. });
  1013. });
  1014. }
  1015. };
  1016. // Preserves the alingment for the element textid after executing transformFn
  1017. //var _getRtfElementHeight = function(rtfElement) {
  1018. // if(rtfElement.innerHTML == '') rtfElement.innerHTML = '&nbsp;';
  1019. // // To handle render text as image
  1020. // //var images = $(rtfElement).children('img');
  1021. // //if(images.length) return images.height();
  1022. // return rtfElement.offsetHeight;
  1023. //};
  1024. // why microsoft decided to default to round to even is beyond me...
  1025. //var _roundToEven = function(number) {
  1026. // var numString = number.toString();
  1027. // var parts = numString.split('.');
  1028. // if(parts.length == 1) return number;
  1029. // if(parts[1].length == 1 && parts[1] == '5') {
  1030. // var wholePart = Number(parts[0]);
  1031. // return wholePart % 2 == 0 ? wholePart : wholePart + 1;
  1032. // } else return Math.round(number);
  1033. //};
  1034. //var _suspendTextAlignment = 0;
  1035. //var _suspendedTextIds = [];
  1036. //$ax.style.startSuspendTextAlignment = function() {
  1037. // _suspendTextAlignment++;
  1038. //}
  1039. //$ax.style.resumeSuspendTextAlignment = function () {
  1040. // _suspendTextAlignment--;
  1041. // if(_suspendTextAlignment == 0) $ax.style.setTextAlignment(_suspendedTextIds);
  1042. //}
  1043. var _transformTextWithVerticalAlignment = $ax.style.transformTextWithVerticalAlignment = function(textId, transformFn) {
  1044. if(!_originalTextCache[textId]) {
  1045. $ax.style.CacheOriginalText(textId);
  1046. }
  1047. var rtfElement = window.document.getElementById(textId);
  1048. if(!rtfElement) return;
  1049. return transformFn();
  1050. //_storeIdToAlignProps(textId);
  1051. //if (_suspendTextAlignment) {
  1052. // _suspendedTextIds.push(textId);
  1053. // return;
  1054. //}
  1055. //$ax.style.setTextAlignment([textId]);
  1056. };
  1057. // this is for vertical alignments set on hidden objects
  1058. //var _idToAlignProps = {};
  1059. //$ax.style.updateTextAlignmentForVisibility = function (textId) {
  1060. // var textObj = $jobj(textId);
  1061. // // must check if parent id exists. Doesn't exist for text objs in check boxes, and potentially elsewhere.
  1062. // var parentId = textObj.parent().attr('id');
  1063. // if (parentId && $ax.visibility.isContainer(parentId)) return;
  1064. // //var alignProps = _idToAlignProps[textId];
  1065. // //if(!alignProps || !_getObjVisible(textId)) return;
  1066. // //if (!alignProps) return;
  1067. // //_setTextAlignment(textId, alignProps);
  1068. // _setTextAlignment(textId);
  1069. //};
  1070. var _getObjVisible = _style.getObjVisible = function (id) {
  1071. var element = document.getElementById(id);
  1072. return element && (element.offsetWidth || element.offsetHeight);
  1073. };
  1074. //$ax.style.setTextAlignment = function (textIds) {
  1075. // var getTextAlignDim = function(textId, alignProps) {
  1076. // var dim = {};
  1077. // var vAlign = alignProps.vAlign;
  1078. // var paddingTop = Number(alignProps.paddingTop);
  1079. // var paddingBottom = Number(alignProps.paddingBottom);
  1080. // var paddingLeft = Number(alignProps.paddingLeft);
  1081. // var paddingRight = Number(alignProps.paddingRight);
  1082. // var topParam = 0.0;
  1083. // var bottomParam = 1.0;
  1084. // var leftParam = 0.0;
  1085. // var rightParam = 1.0;
  1086. // var textObj = $jobj(textId);
  1087. // var textObjParent = textObj.offsetParent();
  1088. // var parentId = textObjParent.attr('id');
  1089. // if(!parentId) {
  1090. // // 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)
  1091. // textObjParent = textObjParent.parent();
  1092. // parentId = textObjParent.attr('id');
  1093. // }
  1094. // parentId = $ax.visibility.getWidgetFromContainer(textObjParent.attr('id'));
  1095. // textObjParent = $jobj(parentId);
  1096. // var parentObj = $obj(parentId);
  1097. // if(parentObj['bottomTextPadding']) bottomParam = parentObj['bottomTextPadding'];
  1098. // if(parentObj['topTextPadding']) topParam = parentObj['topTextPadding'];
  1099. // if(parentObj['leftTextPadding']) leftParam = parentObj['leftTextPadding'];
  1100. // if(parentObj['rightTextPadding']) rightParam = parentObj['rightTextPadding'];
  1101. // // smart shapes are mutually exclusive from compound vectors.
  1102. // var isConnector = parentObj.type == $ax.constants.CONNECTOR_TYPE;
  1103. // if(isConnector) return;
  1104. // var axTextObjectParent = $ax('#' + textObjParent.attr('id'));
  1105. // var jDims = textObj.css(['width','left','top']);
  1106. // var oldWidth = $ax.getNumFromPx(jDims['width']);
  1107. // var oldLeft = $ax.getNumFromPx(jDims['left']);
  1108. // var oldTop = $ax.getNumFromPx(jDims['top']);
  1109. // var newTop = 0;
  1110. // var newLeft = 0.0;
  1111. // var size = axTextObjectParent.size();
  1112. // var width = size.width;
  1113. // var height = size.height;
  1114. // //var width = axTextObjectParent.width();
  1115. // //var height = axTextObjectParent.height();
  1116. // // If text rotated need to handle getting the correct width for text based on bounding rect of rotated parent.
  1117. // var boundingRotation = -$ax.move.getRotationDegreeFromElement(textObj[0]);
  1118. // var boundingParent = $axure.fn.getBoundingSizeForRotate(width, height, boundingRotation);
  1119. // var extraLeftPadding = (width - boundingParent.width) / 2;
  1120. // width = boundingParent.width;
  1121. // var relativeTop = 0.0;
  1122. // relativeTop = height * topParam;
  1123. // var containerHeight = height * bottomParam - relativeTop;
  1124. // newLeft = paddingLeft + extraLeftPadding + width * leftParam;
  1125. // var newWidth = width * (rightParam - leftParam) - paddingLeft - paddingRight;
  1126. // var horizChange = newWidth != oldWidth || newLeft != oldLeft;
  1127. // if(horizChange) {
  1128. // dim.left = newLeft;
  1129. // dim.width = newWidth;
  1130. // //textObj.css('left', newLeft);
  1131. // //textObj.width(newWidth);
  1132. // }
  1133. // var textHeight = _getRtfElementHeight(textObj[0]);
  1134. // if(vAlign == "middle")
  1135. // newTop = _roundToEven(relativeTop + (containerHeight - textHeight + paddingTop - paddingBottom) / 2);
  1136. // else if(vAlign == "bottom")
  1137. // newTop = _roundToEven(relativeTop + containerHeight - textHeight - paddingBottom);
  1138. // else newTop = _roundToEven(paddingTop + relativeTop);
  1139. // var vertChange = oldTop != newTop;
  1140. // if (vertChange) dim.top = newTop; //textObj.css('top', newTop + 'px');
  1141. // return dim;
  1142. // };
  1143. // var applyTextAlignment = function(textId, dim) {
  1144. // var textObj = $jobj(textId);
  1145. // if(dim.left) {
  1146. // textObj.css('left', dim.left);
  1147. // textObj.width(dim.width);
  1148. // }
  1149. // if(dim.top) textObj.css('top', dim.top);
  1150. // if((dim.top || dim.left)) _updateTransformOrigin(textId);
  1151. // };
  1152. // var idToDim = [];
  1153. // for (var i = 0; i < textIds.length; i++) {
  1154. // var textId = textIds[i];
  1155. // var alignProps = _idToAlignProps[textId];
  1156. // if (!alignProps || !_getObjVisible(textId)) continue;
  1157. // idToDim.push({ id: textId, dim: getTextAlignDim(textId, alignProps) });
  1158. // }
  1159. // for (var i = 0; i < idToDim.length; i++) {
  1160. // var info = idToDim[i];
  1161. // applyTextAlignment(info.id, info.dim);
  1162. // }
  1163. //};
  1164. //var _setTextAlignment = function(textId, alignProps, updateProps) {
  1165. // if(updateProps) _storeIdToAlignProps(textId);
  1166. // if(!alignProps) return;
  1167. // var vAlign = alignProps.vAlign;
  1168. // var paddingTop = Number(alignProps.paddingTop);
  1169. // var paddingBottom = Number(alignProps.paddingBottom);
  1170. // var paddingLeft = Number(alignProps.paddingLeft);
  1171. // var paddingRight = Number(alignProps.paddingRight);
  1172. // var topParam = 0.0;
  1173. // var bottomParam = 1.0;
  1174. // var leftParam = 0.0;
  1175. // var rightParam = 1.0;
  1176. // var textObj = $jobj(textId);
  1177. // var textObjParent = textObj.offsetParent();
  1178. // var parentId = textObjParent.attr('id');
  1179. // var isConnector = false;
  1180. // if(parentId) {
  1181. // parentId = $ax.visibility.getWidgetFromContainer(textObjParent.attr('id'));
  1182. // textObjParent = $jobj(parentId);
  1183. // var parentObj = $obj(parentId);
  1184. // if(parentObj['bottomTextPadding']) bottomParam = parentObj['bottomTextPadding'];
  1185. // if(parentObj['topTextPadding']) topParam = parentObj['topTextPadding'];
  1186. // if(parentObj['leftTextPadding']) leftParam = parentObj['leftTextPadding'];
  1187. // if(parentObj['rightTextPadding']) rightParam = parentObj['rightTextPadding'];
  1188. // // smart shapes are mutually exclusive from compound vectors.
  1189. // isConnector = parentObj.type == $ax.constants.CONNECTOR_TYPE;
  1190. // }
  1191. // if(isConnector) return;
  1192. // var axTextObjectParent = $ax('#' + textObjParent.attr('id'));
  1193. // var oldWidth = $ax.getNumFromPx(textObj.css('width'));
  1194. // var oldLeft = $ax.getNumFromPx(textObj.css('left'));
  1195. // var oldTop = $ax.getNumFromPx(textObj.css('top'));
  1196. // var newTop = 0;
  1197. // var newLeft = 0.0;
  1198. // var width = axTextObjectParent.width();
  1199. // var height = axTextObjectParent.height();
  1200. // // If text rotated need to handle getting the correct width for text based on bounding rect of rotated parent.
  1201. // var boundingRotation = -$ax.move.getRotationDegreeFromElement(textObj[0]);
  1202. // var boundingParent = $axure.fn.getBoundingSizeForRotate(width, height, boundingRotation);
  1203. // var extraLeftPadding = (width - boundingParent.width) / 2;
  1204. // width = boundingParent.width;
  1205. // var relativeTop = 0.0;
  1206. // relativeTop = height * topParam;
  1207. // var containerHeight = height * bottomParam - relativeTop;
  1208. // newLeft = paddingLeft + extraLeftPadding + width * leftParam;
  1209. // var newWidth = width * (rightParam - leftParam) - paddingLeft - paddingRight;
  1210. // var horizChange = newWidth != oldWidth || newLeft != oldLeft;
  1211. // if(horizChange) {
  1212. // textObj.css('left', newLeft);
  1213. // textObj.width(newWidth);
  1214. // }
  1215. // var textHeight = _getRtfElementHeight(textObj[0]);
  1216. // if(vAlign == "middle") newTop = _roundToEven(relativeTop + (containerHeight - textHeight + paddingTop - paddingBottom) / 2);
  1217. // else if(vAlign == "bottom") newTop = _roundToEven(relativeTop + containerHeight - textHeight - paddingBottom);
  1218. // else newTop = _roundToEven(paddingTop + relativeTop);
  1219. // var vertChange = oldTop != newTop;
  1220. // if(vertChange) textObj.css('top', newTop + 'px');
  1221. // if((vertChange || horizChange)) _updateTransformOrigin(textId);
  1222. //};
  1223. //var _updateTransformOrigin = function (textId) {
  1224. // var textObj = $jobj(textId);
  1225. // var parentId = textObj.parent().attr('id');
  1226. // if(!$obj(parentId).hasTransformOrigin) return;
  1227. // //var transformOrigin = textObj.css('-webkit-transform-origin') ||
  1228. // // textObj.css('-moz-transform-origin') ||
  1229. // // textObj.css('-ms-transform-origin') ||
  1230. // // textObj.css('transform-origin');
  1231. // //if(transformOrigin) {
  1232. // var textObjParent = $ax('#' + textObj.parent().attr('id'));
  1233. // var newX = (textObjParent.width() / 2 - $ax.getNumFromPx(textObj.css('left')));
  1234. // var newY = (textObjParent.height() / 2 - $ax.getNumFromPx(textObj.css('top')));
  1235. // var newOrigin = newX + 'px ' + newY + 'px';
  1236. // textObj.css('-webkit-transform-origin', newOrigin);
  1237. // textObj.css('-moz-transform-origin', newOrigin);
  1238. // textObj.css('-ms-transform-origin', newOrigin);
  1239. // textObj.css('transform-origin', newOrigin);
  1240. // //}
  1241. //};
  1242. $ax.style.reselectElements = function () {
  1243. // TODO
  1244. console.log('reselect elements -- need to make sure selected/error/disabled are all correct');
  1245. for(let id in _selectedWidgets) {
  1246. // Only looking for the selected widgets that don't have their class set
  1247. if(!_selectedWidgets[id] || _hasAnySelectedClass(id)) continue;
  1248. const state = _generateFullState(id, undefined, true);
  1249. _applyImageAndTextJson(id, state);
  1250. }
  1251. for(let id in _disabledWidgets) {
  1252. // Only looking for the disabled widgets that don't have their class yet
  1253. if (!_disabledWidgets[id] || _hasAnyDisabledClass(id)) continue;
  1254. const state = _generateFullState(id, undefined, undefined, true);
  1255. _applyImageAndTextJson(id, state);
  1256. }
  1257. };
  1258. $ax.style.clearStateForRepeater = function(repeaterId) {
  1259. var children = $ax.getChildElementIdsForRepeater(repeaterId);
  1260. for(var i = 0; i < children.length; i++) {
  1261. var id = children[i];
  1262. delete _hintWidgets[id];
  1263. delete _errorWidgets[id];
  1264. delete _selectedWidgets[id];
  1265. delete _disabledWidgets[id];
  1266. }
  1267. }
  1268. _style.updateStateClass = function (repeaterId) {
  1269. var subElementIds = $ax.getChildElementIdsForRepeater(repeaterId);
  1270. for (var i = 0; i < subElementIds.length; i++) {
  1271. _applyImageAndTextJson(subElementIds[i], $ax.style.generateState(subElementIds[i]));
  1272. }
  1273. }
  1274. $ax.style.clearAdaptiveStyles = function() {
  1275. for(var shapeId in _adaptiveStyledWidgets) {
  1276. var repeaterId = $ax.getParentRepeaterFromScriptId(shapeId);
  1277. if(repeaterId) continue;
  1278. var elementId = $ax.GetButtonShapeId(shapeId);
  1279. if(elementId) _applyImageAndTextJson(elementId, $ax.style.generateState(elementId));
  1280. }
  1281. _adaptiveStyledWidgets = {};
  1282. };
  1283. $ax.style.setAdaptiveStyle = function(shapeId, style) {
  1284. _adaptiveStyledWidgets[$ax.repeater.getScriptIdFromElementId(shapeId)] = style;
  1285. var textId = $ax.GetTextPanelId(shapeId);
  1286. if(textId) _applyTextStyle(textId, style);
  1287. $ax.placeholderManager.refreshPlaceholder(shapeId);
  1288. // removing this for now
  1289. // if(style.location) {
  1290. // $jobj(shapeId).css('top', style.location.x + "px")
  1291. // .css('left', style.location.y + "px");
  1292. // }
  1293. };
  1294. //-------------------------------------------------------------------------
  1295. // _applyTextStyle
  1296. //
  1297. // Applies a rollover style to a text element.
  1298. // id : the id of the text object to set.
  1299. // styleProperties : an object mapping style properties to values. eg:
  1300. // { 'fontWeight' : 'bold',
  1301. // 'fontStyle' : 'italic' }
  1302. //-------------------------------------------------------------------------
  1303. var _applyTextStyle = function (id, style, padding = {top:0, right: 0, bottom: 0, left: 0}) {
  1304. return _transformTextWithVerticalAlignment(id, function() {
  1305. var styleProperties = _getCssStyleProperties(style);
  1306. var container = $('#' + id);
  1307. var newSize = { width: container[0].offsetWidth, height: container[0].offsetHeight };
  1308. var hasLineHeight = !!container.css('line-height');
  1309. container.find('*').each(function(index, element) {
  1310. _applyCssProps(element, styleProperties);
  1311. var width = element.offsetWidth + padding.left + padding.right;
  1312. var height = element.offsetHeight + padding.top + padding.bottom;
  1313. if(width > newSize.width) newSize.width = width;
  1314. if(!hasLineHeight && height > newSize.height) newSize.height = height;
  1315. });
  1316. return newSize;
  1317. });
  1318. };
  1319. var _applyCssProps = function(element, styleProperties, applyAllStyle) {
  1320. if(applyAllStyle) {
  1321. var allProps = styleProperties.allProps;
  1322. for(var prop in allProps) element.style[prop] = allProps[prop];
  1323. } else {
  1324. var nodeName = element.nodeName.toLowerCase();
  1325. if(nodeName == 'p') {
  1326. var parProps = styleProperties.parProps;
  1327. for(prop in parProps) element.style[prop] = parProps[prop];
  1328. } else if(nodeName != 'a') {
  1329. var runProps = styleProperties.runProps;
  1330. for(prop in runProps) element.style[prop] = runProps[prop];
  1331. }
  1332. }
  1333. };
  1334. var _getCssShadow = function(shadow) {
  1335. return !shadow.on ? "none"
  1336. : shadow.offsetX + "px " + shadow.offsetY + "px " + shadow.blurRadius + "px " + _getCssColor(shadow.color);
  1337. };
  1338. var _getCssStyleProperties = function(style) {
  1339. var toApply = {};
  1340. toApply.runProps = {};
  1341. toApply.parProps = {};
  1342. toApply.allProps = {};
  1343. if(style.fontName) toApply.allProps.fontFamily = toApply.runProps.fontFamily = style.fontName;
  1344. // we need to set font size on both runs and pars because otherwise it well mess up the measure and thereby vertical alignment
  1345. if(style.fontSize) toApply.allProps.fontSize = toApply.runProps.fontSize = toApply.parProps.fontSize = style.fontSize;
  1346. if(style.fontWeight !== undefined) toApply.allProps.fontWeight = toApply.runProps.fontWeight = style.fontWeight;
  1347. if(style.fontStyle !== undefined) toApply.allProps.fontStyle = toApply.runProps.fontStyle = style.fontStyle;
  1348. var textDecoration = [];
  1349. if(style.underline !== undefined) textDecoration[0] = style.underline ? 'underline ' : 'none';
  1350. if(style.strikethrough !== undefined) {
  1351. var index = textDecoration.length;
  1352. if(style.strikethrough) textDecoration[index] ='line-through';
  1353. else if(index == 0) textDecoration[0] = 'none';
  1354. }
  1355. if (textDecoration.length > 0) {
  1356. var decorationLineUp = "";
  1357. for (var l = 0; l < textDecoration.length; l++) {
  1358. decorationLineUp = decorationLineUp + textDecoration[l];
  1359. }
  1360. toApply.allProps.textDecoration = toApply.runProps.textDecoration = decorationLineUp;
  1361. }
  1362. if(style.foreGroundFill) {
  1363. toApply.allProps.color = toApply.runProps.color = _getColorFromFill(style.foreGroundFill);
  1364. //if(style.foreGroundFill.opacity) toApply.allProps.opacity = toApply.runProps.opacity = style.foreGroundFill.opacity;
  1365. }
  1366. if(style.horizontalAlignment) toApply.allProps.textAlign = toApply.parProps.textAlign = toApply.runProps.textAlign = style.horizontalAlignment;
  1367. if(style.lineSpacing) toApply.allProps.lineHeight = toApply.parProps.lineHeight = style.lineSpacing;
  1368. if(style.textShadow) toApply.allProps.textShadow = toApply.parProps.textShadow = _getCssShadow(style.textShadow);
  1369. if (style.letterCase) toApply.allProps.textTransform = toApply.parProps.textTransform = style.letterCase;
  1370. if (style.characterSpacing) toApply.allProps.letterSpacing = toApply.runProps.letterSpacing = style.characterSpacing;
  1371. return toApply;
  1372. };
  1373. var _getColorFromFill = function(fill) {
  1374. //var fillString = '00000' + fill.color.toString(16);
  1375. //return '#' + fillString.substring(fillString.length - 6);
  1376. var val = fill.color;
  1377. var color = {};
  1378. color.b = val % 256;
  1379. val = Math.floor(val / 256);
  1380. color.g = val % 256;
  1381. val = Math.floor(val / 256);
  1382. color.r = val % 256;
  1383. color.a = typeof (fill.opacity) == 'number' ? fill.opacity : 1;
  1384. return _getCssColor(color);
  1385. };
  1386. var _getCssColor = function(rgbaObj) {
  1387. return "rgba(" + rgbaObj.r + ", " + rgbaObj.g + ", " + rgbaObj.b + ", " + rgbaObj.a + ")";
  1388. };
  1389. // //--------------------------------------------------------------------------
  1390. // // ApplyStyleRecursive
  1391. // //
  1392. // // Applies a style recursively to all span and div tags including elementNode
  1393. // // and all of its children.
  1394. // //
  1395. // // element : the element to apply the style to
  1396. // // styleName : the name of the style property to set (eg. 'font-weight')
  1397. // // styleValue : the value of the style to set (eg. 'bold')
  1398. // //--------------------------------------------------------------------------
  1399. // function ApplyStyleRecursive(element, styleName, styleValue) {
  1400. // var nodeName = element.nodeName.toLowerCase();
  1401. // if (nodeName == 'div' || nodeName == 'span' || nodeName == 'p') {
  1402. // element.style[styleName] = styleValue;
  1403. // }
  1404. // for (var i = 0; i < element.childNodes.length; i++) {
  1405. // ApplyStyleRecursive(element.childNodes[i], styleName, styleValue);
  1406. // }
  1407. // }
  1408. // //---------------------------------------------------------------------------
  1409. // // ApplyTextProperty
  1410. // //
  1411. // // Applies a text property to rtfElement.
  1412. // //
  1413. // // rtfElement : the the root text element of the rtf object (this is the
  1414. // // element named <id>_rtf
  1415. // // prop : the style property to set.
  1416. // // value : the style value to set.
  1417. // //---------------------------------------------------------------------------
  1418. // function ApplyTextProperty(rtfElement, prop, value) {
  1419. // /*
  1420. // var oldHtml = rtfElement.innerHTML;
  1421. // if (prop == 'fontWeight') {
  1422. // rtfElement.innerHTML = oldHtml.replace(/< *b *\/?>/gi, "");
  1423. // } else if (prop == 'fontStyle') {
  1424. // rtfElement.innerHTML = oldHtml.replace(/< *i *\/?>/gi, "");
  1425. // } else if (prop == 'textDecoration') {
  1426. // rtfElement.innerHTML = oldHtml.replace(/< *u *\/?>/gi, "");
  1427. // }
  1428. // */
  1429. // for (var i = 0; i < rtfElement.childNodes.length; i++) {
  1430. // ApplyStyleRecursive(rtfElement.childNodes[i], prop, value);
  1431. // }
  1432. // }
  1433. //}
  1434. //---------------------------------------------------------------------------
  1435. // GetAndCacheOriginalText
  1436. //
  1437. // Gets the html for the pre-rollover state and returns the Html representing
  1438. // the Rich text.
  1439. //---------------------------------------------------------------------------
  1440. var CACHE_COUNTER = 0;
  1441. $ax.style.CacheOriginalText = function(textId, hasRichTextBeenSet) {
  1442. var rtfQuery = $('#' + textId);
  1443. if(rtfQuery.length > 0) {
  1444. var styleCache = {};
  1445. rtfQuery.find('*').each(function(index, element) {
  1446. var elementId = element.id;
  1447. if(!elementId) element.id = elementId = 'cache' + CACHE_COUNTER++;
  1448. styleCache[elementId] = element.style.cssText;
  1449. });
  1450. _originalTextCache[textId] = {
  1451. styleCache: styleCache
  1452. };
  1453. if(hasRichTextBeenSet) {
  1454. var shapeId = $ax.GetShapeIdFromText(textId);
  1455. _shapesWithSetRichText[shapeId] = true;
  1456. }
  1457. }
  1458. };
  1459. $ax.style.ClearCacheForRepeater = function(repeaterId) {
  1460. for(var elementId in _originalTextCache) {
  1461. var scriptId = $ax.repeater.getScriptIdFromElementId(elementId);
  1462. if($ax.getParentRepeaterFromScriptId(scriptId) == repeaterId) delete _originalTextCache[elementId];
  1463. }
  1464. };
  1465. $ax.style.prefetch = function() {
  1466. var scriptIds = $ax.getAllScriptIds();
  1467. var image = new Image();
  1468. for(var i = 0; i < scriptIds.length; i++) {
  1469. var obj = $obj(scriptIds[i]);
  1470. if (!$ax.public.fn.IsImageBox(obj.type)) continue;
  1471. var images = obj.images;
  1472. for (var key in images) image.src = images[key];
  1473. var imageOverrides = obj.imageOverrides;
  1474. for(var elementId in imageOverrides) {
  1475. var override = imageOverrides[elementId];
  1476. for (var state in override) {
  1477. _addImageOverride(elementId, state, override[state]);
  1478. image.src = override[state];
  1479. }
  1480. }
  1481. }
  1482. };
  1483. });