ie.js 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344
  1. 
  2. // ******* Internet Explorer MANAGER ******** //
  3. //this is to handle all the stupid IE Stuff
  4. $axure.internal(function($ax) {
  5. if(!IE_10_AND_BELOW) return;
  6. var _ieColorManager = {};
  7. if(Number(BROWSER_VERSION) < 9) $ax.ieColorManager = _ieColorManager;
  8. var _applyIEFixedPosition = function() {
  9. if(Number(BROWSER_VERSION) >= 7) return;
  10. $axure(function(diagramObject) { return diagramObject.fixedVertical; }).$()
  11. .appendTo($('body'))
  12. .css('position', 'absolute').css('margin-left', 0 + 'px').css('margin-top', 0 + 'px');
  13. var handleScroll = function() {
  14. $axure(function(diagramObject) { return diagramObject.fixedVertical; })
  15. .each(function(diagramObject, elementId) {
  16. var win = $(window);
  17. var windowWidth = win.width();
  18. var windowHeight = win.height();
  19. var windowScrollLeft = win.scrollLeft();
  20. var windowScrollTop = win.scrollTop();
  21. var newLeft = 0;
  22. var newTop = 0;
  23. var elementQuery = $('#' + elementId);
  24. var elementAxQuery = $ax('#' + elementId);
  25. var width = elementAxQuery.width();
  26. var height = elementAxQuery.height();
  27. var horz = diagramObject.fixedHorizontal;
  28. if(horz == 'left') {
  29. newLeft = windowScrollLeft + diagramObject.fixedMarginHorizontal;
  30. } else if(horz == 'center') {
  31. newLeft = windowScrollLeft + ((windowWidth - width) / 2) + diagramObject.fixedMarginHorizontal;
  32. } else if(horz == 'right') {
  33. newLeft = windowScrollLeft + windowWidth - width - diagramObject.fixedMarginHorizontal;
  34. }
  35. var vert = diagramObject.fixedVertical;
  36. if(vert == 'top') {
  37. newTop = windowScrollTop + diagramObject.fixedMarginVertical;
  38. } else if(vert == 'middle') {
  39. newTop = windowScrollTop + ((windowHeight - height) / 2) + diagramObject.fixedMarginVertical;
  40. } else if(vert == 'bottom') {
  41. newTop = windowScrollTop + windowHeight - height - diagramObject.fixedMarginVertical;
  42. }
  43. elementQuery.css('top', newTop + 'px').css('left', newLeft + 'px');
  44. });
  45. };
  46. $(window).scroll(handleScroll);
  47. $axure.resize(handleScroll);
  48. handleScroll();
  49. };
  50. var _applyBackground = function() {
  51. if(Number(BROWSER_VERSION) >= 9) return;
  52. var styleChain = $ax.adaptive.getAdaptiveIdChain($ax.adaptive.currentViewId);
  53. var argb = _getArgb($ax.pageData.page, styleChain);
  54. var hexColor = _getHexColor(argb, false);
  55. if(hexColor) $('body').css('background-color', hexColor);
  56. _applyBackgroundToQuery($ax('*'));
  57. };
  58. var _applyBackgroundToQuery = function(query) {
  59. if(Number(BROWSER_VERSION) >= 9) return;
  60. var styleChain = $ax.adaptive.getAdaptiveIdChain($ax.adaptive.currentViewId);
  61. query.each(function(obj, elementId) {
  62. if ($ax.public.fn.IsDynamicPanel(obj.type)) {
  63. var stateCount = obj.diagrams.length;
  64. for(var j = 0; j < stateCount; j++) {
  65. var stateId = $ax.repeater.applySuffixToElementId(elementId, '_state' + j);
  66. var argb = _getArgb(obj.diagrams[j], styleChain);
  67. var hexColor = _getHexColor(argb, true);
  68. if(hexColor) $jobj(stateId).css('background-color', hexColor);
  69. }
  70. } else if ($ax.public.fn.IsRepeater(obj.type)) {
  71. }
  72. });
  73. };
  74. _ieColorManager.applyBackground = _applyBackgroundToQuery;
  75. var _getArgb = function(diagram, styleChain) {
  76. var argb = undefined;
  77. for(var i = 0; i < styleChain.length && !argb; i++) {
  78. var style = diagram.adaptiveStyles[styleChain[i]];
  79. argb = style.fill && style.fill.color;
  80. }
  81. if(!argb) argb = diagram.style.fill.color;
  82. return argb;
  83. };
  84. var gMult = 256;
  85. var rMult = gMult * 256;
  86. var aMult = rMult * 256;
  87. var _getHexColor = function(argb, allowWhite) {
  88. var a = Math.floor(argb / aMult);
  89. argb -= a * aMult;
  90. var r = Math.floor(argb / rMult);
  91. argb -= r * rMult;
  92. var g = Math.floor(argb / gMult);
  93. var b = argb - g * gMult;
  94. return _getColorFromArgb(a, r, g, b, allowWhite);
  95. };
  96. var _getColorFromArgb = function(a, r, g, b, allowWhite) {
  97. if(Number(BROWSER_VERSION) >= 9) return undefined;
  98. //convert the color with alpha to a color with no alpha (assuming white background)
  99. r = Math.min((r * a) / 255 + 255 - a, 255);
  100. g = Math.min((g * a) / 255 + 255 - a, 255);
  101. b = Math.min((b * a) / 255 + 255 - a, 255);
  102. if(a == 0) return undefined;
  103. if(!allowWhite && (r == 255 && g == 255 && b == 255)) return undefined;
  104. var color = '#';
  105. color += Math.floor(r / 16).toString(16);
  106. color += Math.floor(r % 16).toString(16);
  107. color += Math.floor(g / 16).toString(16);
  108. color += Math.floor(g % 16).toString(16);
  109. color += Math.floor(b / 16).toString(16);
  110. color += Math.floor(b % 16).toString(16);
  111. return color;
  112. };
  113. _ieColorManager.getColorFromArgb = _getColorFromArgb;
  114. var getIEOffset = function(transform, rect) {
  115. var translatedVertexes = [
  116. $axure.utils.Vector2D(0, 0), //we dont translate, so the orgin is fixed
  117. transform.mul($axure.utils.Vector2D(0, rect.height)),
  118. transform.mul($axure.utils.Vector2D(rect.width, 0)),
  119. transform.mul($axure.utils.Vector2D(rect.width, rect.height))];
  120. var minX = 0, minY = 0, maxX = 0, maxY = 0;
  121. $.each(translatedVertexes, function(index, p) {
  122. minX = Math.min(minX, p.x);
  123. minY = Math.min(minY, p.y);
  124. maxX = Math.max(maxX, p.x);
  125. maxY = Math.max(maxY, p.y);
  126. });
  127. return $axure.utils.Vector2D(
  128. (maxX - minX - rect.width) / 2,
  129. (maxY - minY - rect.height) / 2);
  130. };
  131. var _filterFromTransform = function(transform) {
  132. return "progid:DXImageTransform.Microsoft.Matrix(M11=" + transform.m11 +
  133. ", M12=" + transform.m12 + ", M21=" + transform.m21 +
  134. ", M22=" + transform.m22 + ", SizingMethod='auto expand')";
  135. };
  136. var _applyIERotation = function() {
  137. if(Number(BROWSER_VERSION) >= 9) return;
  138. $axure(function(diagramObject) {
  139. return ((diagramObject.style.rotation && Math.abs(diagramObject.style.rotation) > 0.1)
  140. || (diagramObject.style.textRotation && Math.abs(diagramObject.style.textRotation) > 0.1))
  141. && !diagramObject.isContained;
  142. }).each(function(diagramObject, elementId) {
  143. var rotation = diagramObject.style.rotation || 0;
  144. var $element = $('#' + elementId);
  145. var axElement = $ax('#' + elementId);
  146. var width = axElement.width();
  147. var height = axElement.height();
  148. var originX = width / 2;
  149. var originY = height / 2;
  150. var shapeIeOffset;
  151. $element.children().each(function() {
  152. var $child = $(this);
  153. var axChild = $ax('#' + $child.attr('id'));
  154. var childWidth = axChild.width();
  155. var childHeight = axChild.height() + $child.position().top;
  156. var centerX = $child.position().left + (childWidth / 2);
  157. var centerY = $child.position().top + (childHeight / 2);
  158. var deltaX = centerX - originX;
  159. var deltaY = centerY - originY;
  160. var effectiveRotation = rotation;
  161. var textObject = $ax.getObjectFromElementId($child.attr('id'));
  162. if(textObject) {
  163. if(textObject.style.textRotation) effectiveRotation = textObject.style.textRotation;
  164. else return;
  165. }
  166. var transform = $ax.utils.Matrix2D.identity().rotate(effectiveRotation);
  167. var filter = _filterFromTransform(transform);
  168. $child.css('filter', filter)
  169. .width(childWidth + 1)
  170. .height(childHeight + 1);
  171. var p = transform.mul($ax.utils.Vector2D(deltaX, deltaY));
  172. var ieOffset = getIEOffset(transform, { width: childWidth, height: childHeight });
  173. if(!textObject) {
  174. shapeIeOffset = ieOffset;
  175. } else {
  176. // This is a close approximation, but not exact
  177. if(diagramObject.style.verticalAlignment != 'top') ieOffset.y -= shapeIeOffset.y + Math.abs(shapeIeOffset.x);
  178. }
  179. $child.css("margin-left", -ieOffset.x - deltaX + p.x).css("margin-top", -ieOffset.y - deltaY + p.y);
  180. });
  181. });
  182. };
  183. var _fixIEStretchBackground = function() {
  184. if(Number(BROWSER_VERSION) >= 9) return;
  185. var pageStyle = $ax.adaptive.getPageStyle();
  186. if(!pageStyle.imageRepeat || pageStyle.imageRepeat == 'auto') return;
  187. $('body').css('background-image', 'none');
  188. var viewId = $ax.adaptive.currentViewId;
  189. var imageInfo = viewId ? $ax.pageData.viewIdToBackgroundImageInfo && $ax.pageData.viewIdToBackgroundImageInfo[viewId] : $ax.pageData.defaultBackgroundImageInfo;
  190. if(imageInfo && imageInfo.path) {
  191. if($('#bg_img').length == 0) $('body').append('<img id="bg_img"/>');
  192. $('#bg_img').attr('src', imageInfo.path).css('position', 'fixed').css('z-index', '-10000');
  193. _resizeIEBackground();
  194. } else $('#bg_img').remove();
  195. };
  196. var _resizeIEBackground = function() {
  197. if(Number(BROWSER_VERSION) >= 9) return;
  198. //var page = $ax.pageData.page;
  199. var viewId = $ax.adaptive.currentViewId;
  200. var pageStyle = $ax.adaptive.getPageStyle();
  201. if(!$ax.pageData.defaultBackgroundImageInfo && !$ax.pageData.viewIdToBackgroundImageInfo) return;
  202. var imageInfo = viewId ? $ax.pageData.viewIdToBackgroundImageInfo[viewId] : $ax.pageData.defaultBackgroundImageInfo;
  203. if(!imageInfo) return;
  204. var imageWidth = imageInfo.width;
  205. var imageHeight = imageInfo.height;
  206. var windowWidth = $(window).width();
  207. var windowHeight = $(window).height();
  208. var isCover = pageStyle.imageRepeat == 'cover';
  209. var wRatio = windowWidth / imageWidth;
  210. var hRatio = windowHeight / imageHeight;
  211. var ratio = wRatio;
  212. if(isCover) {
  213. if(hRatio > wRatio) ratio = hRatio;
  214. } else {
  215. if(hRatio < wRatio) ratio = hRatio;
  216. }
  217. var width = imageWidth * ratio;
  218. var height = imageHeight * ratio;
  219. var left = '0px';
  220. if((isCover && width > windowWidth) || (!isCover && width < windowWidth)) {
  221. if(pageStyle.imageHorizontalAlignment == 'center') {
  222. left = ((windowWidth - width) / 2) + 'px';
  223. } else if(pageStyle.imageHorizontalAlignment == 'far') {
  224. left = (windowWidth - width) + 'px';
  225. }
  226. }
  227. var top = '0px';
  228. if((isCover && height > windowHeight) || (!isCover && height < windowHeight)) {
  229. if(pageStyle.imageVerticalAlignment == 'center') {
  230. top = ((windowHeight - height) / 2) + 'px';
  231. } else if(pageStyle.imageVerticalAlignment == 'far') {
  232. top = (windowHeight - height) + 'px';
  233. }
  234. }
  235. $('#bg_img').css('top', top).css('left', left).css('width', width).css('height', height);
  236. };
  237. var _fixAllPngs = function() {
  238. if(!(/MSIE ((5\.5)|6)/.test(window.navigator.userAgent) && window.navigator.platform == "Win32")) return;
  239. $('img[src$=".png"]').each(function() {
  240. if(!this.complete) {
  241. this.onload = function() { $axure.utils.fixPng(this); };
  242. } else {
  243. $axure.utils.fixPng(this);
  244. }
  245. });
  246. };
  247. var _fixInputSize = function() {
  248. if(Number(BROWSER_VERSION) >= 8 || window.navigator.userAgent.indexOf("Trident/4.0") > -1) return;
  249. var inputs = $('input').not(':input[type=button], :input[type=submit], :input[type=radio], :input[type=checkbox]');
  250. inputs.each(function() {
  251. var $input = $(this);
  252. var axInput = $ax('#' + $input.attr('id'));
  253. $input.css('height', (axInput.height() - 4 + 'px')).css('width', (axInput.width() - 2 + 'px'));
  254. });
  255. var textAreas = $($ax.constants.TEXT_AREA_TYPE);
  256. textAreas.each(function() {
  257. var $textArea = $(this);
  258. var axText = $ax('#' + $textArea.attr('id'));
  259. $textArea.css('height', (axText.height() - 6 + 'px')).css('width', (axText.width() - 6 + 'px'));
  260. });
  261. };
  262. var _fixInputBackground = function() {
  263. var inputs = $('input').not(':input[type=button], :input[type=submit], :input[type=radio], :input[type=checkbox]');
  264. inputs = inputs.add($($ax.constants.TEXT_AREA_TYPE));
  265. inputs.each(function() {
  266. var $input = $(this);
  267. if($input.css('background-color') == 'transparent') {
  268. $input.css('background-image', 'url(../../transparent.gif)');
  269. } else {
  270. $input.css('background-image', '');
  271. }
  272. });
  273. };
  274. $(document).ready(function() {
  275. _fixIEStretchBackground();
  276. _applyIEFixedPosition();
  277. $axure.resize(function() {
  278. _resizeIEBackground();
  279. });
  280. $ax.adaptive.bind('viewChanged', function() {
  281. _fixIEStretchBackground();
  282. _applyBackground();
  283. _fixInputBackground();
  284. });
  285. _fixAllPngs();
  286. _applyIERotation();
  287. _applyBackground();
  288. _fixInputSize();
  289. _fixInputBackground();
  290. });
  291. });