PageRenderTime 61ms CodeModel.GetById 24ms RepoModel.GetById 1ms app.codeStats 0ms

/src/sap.ui.core/test/testsuite/DeviceResolutionEmulator.html

https://gitlab.com/crsr/openui5
HTML | 379 lines | 331 code | 48 blank | 0 comment | 0 complexity | 8f5c48c5887e742acdb0470f69ea8aa8 MD5 | raw file
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv='X-UA-Compatible' content='IE=edge' />
  5. <title>Mobile Device Resolution Emulator</title>
  6. <script id='sap-ui-bootstrap' src='../sap-ui-core.js' data-sap-ui-theme='sap_goldreflection'
  7. data-sap-ui-libs='sap.ui.layout,sap.ui.commons'></script>
  8. <script>
  9. // list of known devices
  10. var aDevices = [
  11. /* {
  12. name : "Apple iPad2 (iOS 4.3.3)",
  13. "long" : 1024,
  14. "short" : 768,
  15. landscapeDefault : true,
  16. ua : "Mozilla/5.0 (iPad; U; CPU OS 4_3_3 like Mac OS X; en-us) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8J2 Safari/6533.18.5"
  17. },*/
  18. {
  19. name : "Apple iPad2 (iOS 5.1.1)",
  20. "long" : 1024,
  21. "short" : 768,
  22. landscapeDefault : true,
  23. ua : "Mozilla/5.0 (iPad; CPU OS 5_1_1 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Mobile/9B206"
  24. },
  25. {
  26. name : "iPhone 3GS (iOS 4.3.3)",
  27. "long" : 480,
  28. "short" : 320,
  29. ua : "Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_3_3 like Mac OS X; en-us) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8J2 Safari/6533.18.5"
  30. },
  31. { // pool iPhone 4S, as delivered; may be upgraded
  32. name : "iPhone 4S (iOS 5.0.1)",
  33. "long" : 480,
  34. "short" : 320,
  35. ua : "Mozilla/5.0 (iPhone; CPU iPhone OS 5_0_1 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Version/5.1 Mobile/9A406 Safari/7534.48.3"
  36. },
  37. { // personal Galaxy S2, as delivered, will be upgraded to ICS
  38. name : "Samsung Galaxy S2 (Android 2.3.3)",
  39. "long" : 800,
  40. "short" : 480,
  41. ua : "Mozilla/5.0 (Linux; U; Android 2.3.3; en-us; GT-I9100 Build/GINGERBREAD) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1"
  42. },
  43. { // our Nokia Lumia 800, as delivered
  44. name : "Nokia Lumia 800 (Windows Phone 7.5)",
  45. "long" : 800,
  46. "short" : 480,
  47. ua : "Mozilla/5.0 (compatible; MSIE 9.0; Windows Phone OS 7.5; Trident/5.0; IEMobile/9.0; NOKIA; Lumia 800)"
  48. },
  49. { // our BlackBerry 9900 Bold, as delivered
  50. name : "BlackBerry 9900 Bold (Blackberry 7)",
  51. "long" : 640,
  52. "short" : 480,
  53. landscapeDefault : true,
  54. ua : "Mozilla/5.0 (BlackBerry; U; BlackBerry 9900; de) AppleWebKit/534.11+ (KHTML, like Gecko) Version/7.0.0.296 Mobile Safari/534.11+"
  55. },
  56. {
  57. name : "BlackBerry 10 Dev Alpha B (Blackberry 10)",
  58. "long" : 640, // TODO: verify
  59. "short" : 384, // TODO: verify
  60. landscapeDefault : false,
  61. ua : "Mozilla/5.0 (BB10; Touch) AppleWebKit/537.3+ (KHTML, like Gecko) Version/10.0.9.388 Mobile Safari/537.3+"
  62. }];
  63. var urlField, lb, rbg, $frame, initialUrl = "../test-resources/sap/m/App.html";
  64. /**
  65. * Tries to replace all relative src= and href= URLs in the given HTML code with absolute ones, based on the given document location
  66. * Adapts calls to sap.ui.localResources in the same way.
  67. */
  68. function fixRelativeLinks(html, baseUrl) {
  69. var iRelativeThreshold = 5;
  70. var relativeLinks = [];
  71. var localPkgs = [];
  72. function isRelative(url) {
  73. var trimmedUrl = jQuery.trim(url);
  74. return !jQuery.sap.startsWith(trimmedUrl, "http:") && !jQuery.sap.startsWith(trimmedUrl, "https:")
  75. && !jQuery.sap.startsWith(trimmedUrl, "javascript:") && !jQuery.sap.startsWith(trimmedUrl, "/");
  76. }
  77. // replace any src="..." URLs
  78. html = html.replace(/(src\s*=\s*[\'\"])([^\'\"]+)([\'\"])/gi, function(match, prefix, url, suffix) {
  79. if (isRelative(url)) {
  80. relativeLinks.push(url);
  81. return prefix + baseUrl + url + suffix;
  82. }
  83. return match;
  84. });
  85. // replace any href="..." URLs
  86. html = html.replace(/(href\s*=\s*[\'\"])([^\'\"]+)([\'\"])/gi, function(match, prefix, url, suffix) {
  87. if (isRelative(url)) {
  88. relativeLinks.push(url);
  89. return prefix + baseUrl + url + suffix;
  90. }
  91. return match;
  92. });
  93. // replace sap.ui.localResource() calls
  94. html = html.replace(/sap\.ui\.localResources\s*\(\s*[\'\"]([^\'\"]+)[\'\"]\s*\)/gi, function(sMatch, sModule) {
  95. localPkgs.push(sModule);
  96. return "jQuery.sap.registerModulePath('" + sModule + "', '" + baseUrl + sModule.replace('.', '/') + "')";
  97. });
  98. var msg = [];
  99. if (relativeLinks.length > 0) {
  100. msg.push("Found ", relativeLinks.length, " relative links and tried to fix them");
  101. if (relativeLinks.length >= iRelativeThreshold) {
  102. msg.push(", the first " + iRelativeThreshold + " ones were");
  103. }
  104. msg.push(":\n");
  105. msg.push(relativeLinks.splice(0, iRelativeThreshold).join('\n'));
  106. }
  107. if (localPkgs.length > 0) {
  108. if (msg.length > 0) {
  109. msg.push("\n\n");
  110. }
  111. msg.push("Found ", localPkgs.length, " local resource package declarations and tried to fix them");
  112. if (localPkgs.length >= iRelativeThreshold) {
  113. msg.push(", the first " + iRelativeThreshold + " ones were");
  114. }
  115. msg.push(":\n");
  116. msg.push(localPkgs.splice(0, iRelativeThreshold).join('\n'));
  117. }
  118. if (msg.length > 0) {
  119. //msg.push("\n\nYou may need to fix more URLs, e.g. image locations supplied to controls.");
  120. //jQuery.sap.require("sap.ui.commons.MessageBox");
  121. //sap.ui.commons.MessageBox.show(msg.join(""), sap.ui.commons.MessageBox.Icon.INFORMATION, "Snippet Import From URL: Fixed Relative URLs");
  122. }
  123. return html;
  124. }
  125. function getFakeUserAgentSetter(ua) {
  126. ua = ua || "MY FAKE BROWSER; Version 1.0";
  127. if (jQuery.browser.safari) {
  128. return "var __originalNavigator = window.navigator;window.navigator = new Object();window.navigator.__proto__ = __originalNavigator;window.navigator.__defineGetter__('userAgent', function () { return '"
  129. + ua + "'; });";
  130. } else if ($.browser.msie) { // does not even work in IE10. But IE is anyway not THE browser for mobile tests...
  131. return "alert('Overriding the user agent does not work in Internet Explorer. PLEASE consider a different browser.')"
  132. } else {
  133. return "window.navigator.__defineGetter__('userAgent', function(){return '" + ua + "'});";
  134. }
  135. }
  136. var config = "window['sap-ui-config'] = {'xx-test-mobile':true};"; // TODO: could be overwritten
  137. function addFakeUserAgent(html, ua) {
  138. html = html.replace("<head>", "<head><script>" + config + getFakeUserAgentSetter(ua) + "<" + "/script>");
  139. return html;
  140. }
  141. function initialize() {
  142. // check whether a certain url needs to be loaded
  143. var urlParts = window.location.href.split("?");
  144. if ((urlParts.length > 1) && (urlParts[1].length > 4)) {
  145. // URL of a page is given
  146. if (jQuery.sap.startsWith(urlParts[1], "url=")) {
  147. var rawUrl = urlParts[1].substr(4);
  148. var url = rawUrl.replace(/%23/g, "#").replace(/%26/g, "&").replace(/%3F/g, "?").replace(/%25/g, "%");
  149. initialUrl = url;
  150. }
  151. }
  152. }
  153. /**
  154. * Updates the preview frame according to the selected device
  155. */
  156. function updateFrameConfig() {
  157. var i = lb.getSelectedIndex();
  158. if (i > -1) {
  159. var device = aDevices[i];
  160. var width = device.landscapeDefault ? device["long"] : device["short"];
  161. var height = device.landscapeDefault ? device["short"] : device["long"];
  162. $frame.css({
  163. "width" : width + "px",
  164. "height" : height + "px"
  165. });
  166. updateFrameUrl(); // TODO: optimize
  167. rbg.setSelectedIndex(device.landscapeDefault ? 1 : 0);
  168. }
  169. }
  170. /**
  171. * Loads the currently entered URL into the test frame
  172. */
  173. function updateFrameUrl() {
  174. var i = lb.getSelectedIndex();
  175. if (i > -1) {
  176. var device = aDevices[i];
  177. var url = urlField.getValue();
  178. window.url = url;
  179. var hasParameters = (url.indexOf("?") > -1);
  180. var urlParam = (hasParameters ? "&" : "?") + "sap-ui-xx-test-mobile=true";
  181. url = url + urlParam;
  182. var result = jQuery.sap.syncGet(url);
  183. var content = "";
  184. if (result.success) {
  185. // great!
  186. content = result.data;
  187. } else {
  188. jQuery.sap.require("sap.ui.commons.MessageBox");
  189. sap.ui.commons.MessageBox.show("Error when loading the code from URL'" + url
  190. + ".\nDoes the file exist? Note: cross-domain URLs cannot be loaded.", sap.ui.commons.MessageBox.Icon.ERROR, "Error");
  191. return;
  192. }
  193. if (content == "") {
  194. jQuery.sap.require("sap.ui.commons.MessageBox");
  195. sap.ui.commons.MessageBox.show("Error when loading the code from URL'" + url
  196. + ".\nDoes the file exist? Note: cross-domain URLs cannot be loaded.", sap.ui.commons.MessageBox.Icon.ERROR, "Error");
  197. } else {
  198. // content loaded successfully
  199. var baseUrl = url.split("?")[0].split("#")[0];
  200. if (jQuery.sap.endsWithIgnoreCase(baseUrl, ".html") || jQuery.sap.endsWithIgnoreCase(baseUrl, ".htm")
  201. || jQuery.sap.endsWithIgnoreCase(baseUrl, ".epx") || jQuery.sap.endsWithIgnoreCase(baseUrl, ".asp")
  202. || jQuery.sap.endsWithIgnoreCase(baseUrl, ".aspx") || jQuery.sap.endsWithIgnoreCase(baseUrl, ".jsp")) {
  203. baseUrl = baseUrl.substr(0, baseUrl.lastIndexOf("/"));
  204. }
  205. if (!jQuery.sap.endsWith(baseUrl, "/")) {
  206. baseUrl += "/";
  207. }
  208. content = fixRelativeLinks(content, baseUrl);
  209. content = addFakeUserAgent(content, device.ua);
  210. recreateIframe();
  211. var frameDoc = $frame[0].contentDocument;
  212. frameDoc.open("replace");
  213. frameDoc.write(content);
  214. frameDoc.close();
  215. }
  216. }
  217. }
  218. // need to destroy the old iframe, as just re-writing its content does not clear up the JS objects reliably in Webkit
  219. function recreateIframe() {
  220. var width = $frame.css("width");
  221. var height = $frame.css("height");
  222. $frame.remove();
  223. $frame = $("<iframe id='theFrame' style='width:" + width + ";height:" + height + ";'></iframe>").appendTo(document.body);
  224. }
  225. function updateOrientation() {
  226. var i = lb.getSelectedIndex();
  227. if (i > -1) {
  228. var device = aDevices[i];
  229. var landscape = (rbg.getSelectedIndex() == 1);
  230. var width = landscape ? device["long"] : device["short"];
  231. var height = landscape ? device["short"] : device["long"];
  232. $frame.css({
  233. "width" : width + "px",
  234. "height" : height + "px"
  235. });
  236. }
  237. }
  238. function devAvailable() {
  239. // check the existence of sapui5-internal and register the sap.ui.dev library
  240. bDevAvailable = jQuery.sap.syncHead("/sapui5-internal/resources/sap/ui/dev/");
  241. if (bDevAvailable) {
  242. jQuery.sap.registerModulePath("sap.ui.dev", "/sapui5-internal/resources/sap/ui/dev/");
  243. sap.ui.getCore().loadLibrary("sap.ui.dev");
  244. }
  245. return bDevAvailable;
  246. }
  247. function openInMobile() {
  248. var sWeinreId = jQuery.sap.uid();
  249. var sWeinreClientUrl = sap.ui.getCore().getConfiguration().getWeinreServer() + "/client/#" + sWeinreId;
  250. var oContainer = new sap.ui.layout.VerticalLayout();
  251. //var href = (document.location.href.indexOf("#") > -1) ? document.location.href.split("#")[0] : document.location.href;
  252. var oQRCode = new sap.ui.dev.qrcode.QRCode({data:url + "?sap-ui-weinreId=" + sWeinreId,sizeFactor:5});
  253. var link = new sap.ui.commons.Link({text:"Remote Web Inspector (webkit only!)",href:sWeinreClientUrl,target:"_blank"});
  254. jQuery.sap.require("sap.ui.core.Popup");
  255. var oPopup = new sap.ui.core.Popup(oContainer, false, true, true).attachClosed(function(){
  256. oContainer.destroy();
  257. });
  258. oContainer.addContent(oQRCode).addContent(link);
  259. oPopup.open();
  260. }
  261. // UI initialization
  262. var url;
  263. $(function() {
  264. $frame = $("#theFrame");
  265. urlField = new sap.ui.commons.TextField("urlField", {
  266. width : "100%",
  267. value : initialUrl,
  268. change : updateFrameUrl
  269. });
  270. url = initialUrl;
  271. urlField.placeAt("urlFieldHolder");
  272. lb = new sap.ui.commons.ListBox("lb", {
  273. select : updateFrameConfig,
  274. visibleItems: 3
  275. });
  276. for ( var i = 0; i < aDevices.length; i++) {
  277. lb.addItem(new sap.ui.core.ListItem("li_" + i, {
  278. text : aDevices[i].name
  279. }));
  280. }
  281. lb.setSelectedIndex(0).placeAt("configArea");
  282. new sap.ui.commons.Label({
  283. text : "Orientation:",
  284. labelFor : "rbg"
  285. }).placeAt("configArea");
  286. rbg = new sap.ui.commons.RadioButtonGroup("rbg", {
  287. select : updateOrientation,
  288. items : [ new sap.ui.core.Item({
  289. text : "Portrait"
  290. }), new sap.ui.core.Item({
  291. text : "Landscape"
  292. }) ],
  293. selectedIndex : (aDevices[0].landscapeDefault ? 1 : 0)
  294. }).placeAt("configArea");
  295. if (devAvailable()) {
  296. new sap.ui.commons.Link({press:openInMobile,text:"Open in Mobile",tooltip:"Display the QRCode for the embedded page. The user-agent is not overridden anymore, then."}).placeAt("configArea");
  297. }
  298. updateFrameUrl();
  299. updateFrameConfig();
  300. });
  301. initialize();
  302. </script>
  303. <style>
  304. #urlFieldHolder {
  305. margin-bottom: 8px;
  306. }
  307. #configArea {
  308. margin-bottom: 8px;
  309. }
  310. #lb {
  311. margin-right: 8px;
  312. }
  313. #rbg {
  314. margin-left: 4px;
  315. }
  316. #theFrame {
  317. border: 2px solid red;
  318. }
  319. /* make qrcode more visible */
  320. canvas[id*=qrcode] {
  321. border: 20px solid white;
  322. }
  323. </style>
  324. </head>
  325. <body class='sapUiBody'>
  326. <div id="urlFieldHolder"></div>
  327. Configuration:
  328. <div id="configArea"></div>
  329. <iframe id="theFrame"></iframe>
  330. </body>
  331. </html>