PageRenderTime 38ms CodeModel.GetById 13ms RepoModel.GetById 0ms 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. 

  2. <html>
    3. 

  3. <head>
    4. 

  4. <meta http-equiv='X-UA-Compatible' content='IE=edge' />
    5. 

  5. <title>Mobile Device Resolution Emulator</title>
    6. 

  6. 

  7. <script id='sap-ui-bootstrap' src='../sap-ui-core.js' data-sap-ui-theme='sap_goldreflection'
    8. 

  8. 	data-sap-ui-libs='sap.ui.layout,sap.ui.commons'></script>
    9. 

  9. 

  10. 

  11. <script>
    12. 

  12. 

  13.  	// list of known devices
    14. 

  14.  	var aDevices = [
    15. 

  15. 		/*	{
    16. 

  16.  				name : "Apple iPad2 (iOS 4.3.3)",
    17. 

  17.  				"long" : 1024,
    18. 

  18.  				"short" : 768,
    19. 

  19.  				landscapeDefault : true,
    20. 

  20.  				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"
    21. 

  21.  			},*/
    22. 

  22.  			{
    23. 

  23.  				name : "Apple iPad2 (iOS 5.1.1)",
    24. 

  24.  				"long" : 1024,
    25. 

  25.  				"short" : 768,
    26. 

  26.  				landscapeDefault : true,
    27. 

  27.  				ua : "Mozilla/5.0 (iPad; CPU OS 5_1_1 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Mobile/9B206"
    28. 

  28.  			},
    29. 

  29.  			{
    30. 

  30.  				name : "iPhone 3GS (iOS 4.3.3)",
    31. 

  31.  				"long" : 480,
    32. 

  32.  				"short" : 320,
    33. 

  33.  				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"
    34. 

  34.  			},
    35. 

  35.  			{ // pool iPhone 4S, as delivered; may be upgraded
    36. 

  36.  				name : "iPhone 4S (iOS 5.0.1)",
    37. 

  37.  				"long" : 480,
    38. 

  38.  				"short" : 320,
    39. 

  39.  				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"
    40. 

  40.  			},
    41. 

  41.  			{ // personal Galaxy S2, as delivered, will be upgraded to ICS
    42. 

  42.  				name : "Samsung Galaxy S2 (Android 2.3.3)",
    43. 

  43.  				"long" : 800,
    44. 

  44.  				"short" : 480,
    45. 

  45.  				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"
    46. 

  46.  			},
    47. 

  47.  			{ // our Nokia Lumia 800, as delivered
    48. 

  48.  				name : "Nokia Lumia 800 (Windows Phone 7.5)",
    49. 

  49.  				"long" : 800,
    50. 

  50.  				"short" : 480,
    51. 

  51.  				ua : "Mozilla/5.0 (compatible; MSIE 9.0; Windows Phone OS 7.5; Trident/5.0; IEMobile/9.0; NOKIA; Lumia 800)"
    52. 

  52.  			},
    53. 

  53.  			{ // our BlackBerry 9900 Bold, as delivered
    54. 

  54.  				name : "BlackBerry 9900 Bold (Blackberry 7)",
    55. 

  55.  				"long" : 640,
    56. 

  56.  				"short" : 480,
    57. 

  57.  				landscapeDefault : true,
    58. 

  58.  				ua : "Mozilla/5.0 (BlackBerry; U; BlackBerry 9900; de) AppleWebKit/534.11+ (KHTML, like Gecko) Version/7.0.0.296 Mobile Safari/534.11+"
    59. 

  59.  			},
    60. 

  60.  			{
    61. 

  61.  				name : "BlackBerry 10 Dev Alpha B (Blackberry 10)",
    62. 

  62.  				"long" : 640, // TODO: verify
    63. 

  63.  				"short" : 384, // TODO: verify
    64. 

  64.  				landscapeDefault : false,
    65. 

  65.  				ua : "Mozilla/5.0 (BB10; Touch) AppleWebKit/537.3+ (KHTML, like Gecko) Version/10.0.9.388 Mobile Safari/537.3+"
    66. 

  66.  			}];
    67. 

  67.  	
    68. 

  68.  	var urlField, lb, rbg, $frame, initialUrl = "../test-resources/sap/m/App.html";
    69. 

  69.  	
    70. 

  70.  	/**
    71. 

  71.  	 * Tries to replace all relative src= and href= URLs in the given HTML code with absolute ones, based on the given document location
    72. 

  72.  	 * Adapts calls to sap.ui.localResources in the same way. 
    73. 

  73.  	 */
    74. 

  74.  	function fixRelativeLinks(html, baseUrl) {
    75. 

  75.  		var iRelativeThreshold = 5;
    76. 

  76.  	
    77. 

  77.  		var relativeLinks = [];
    78. 

  78.  		var localPkgs = [];
    79. 

  79.  	
    80. 

  80.  		function isRelative(url) {
    81. 

  81.  			var trimmedUrl = jQuery.trim(url);
    82. 

  82.  			return !jQuery.sap.startsWith(trimmedUrl, "http:") && !jQuery.sap.startsWith(trimmedUrl, "https:")
    83. 

  83.  					&& !jQuery.sap.startsWith(trimmedUrl, "javascript:") && !jQuery.sap.startsWith(trimmedUrl, "/");
    84. 

  84.  		}
    85. 

  85.  	
    86. 

  86.  		// replace any src="..." URLs 
    87. 

  87.  		html = html.replace(/(src\s*=\s*[\'\"])([^\'\"]+)([\'\"])/gi, function(match, prefix, url, suffix) {
    88. 

  88.  			if (isRelative(url)) {
    89. 

  89.  				relativeLinks.push(url);
    90. 

  90.  				return prefix + baseUrl + url + suffix;
    91. 

  91.  			}
    92. 

  92.  			return match;
    93. 

  93.  		});
    94. 

  94.  	
    95. 

  95.  		// replace any href="..." URLs
    96. 

  96.  		html = html.replace(/(href\s*=\s*[\'\"])([^\'\"]+)([\'\"])/gi, function(match, prefix, url, suffix) {
    97. 

  97.  			if (isRelative(url)) {
    98. 

  98.  				relativeLinks.push(url);
    99. 

  99.  				return prefix + baseUrl + url + suffix;
    100. 

  100.  			}
    101. 

  101.  			return match;
    102. 

  102.  		});
    103. 

  103.  	
    104. 

  104.  		// replace sap.ui.localResource() calls
    105. 

  105.  		html = html.replace(/sap\.ui\.localResources\s*\(\s*[\'\"]([^\'\"]+)[\'\"]\s*\)/gi, function(sMatch, sModule) {
    106. 

  106.  			localPkgs.push(sModule);
    107. 

  107.  			return "jQuery.sap.registerModulePath('" + sModule + "', '" + baseUrl + sModule.replace('.', '/') + "')";
    108. 

  108.  		});
    109. 

  109.  	
    110. 

  110.  		var msg = [];
    111. 

  111.  		if (relativeLinks.length > 0) {
    112. 

  112.  			msg.push("Found ", relativeLinks.length, " relative links and tried to fix them");
    113. 

  113.  			if (relativeLinks.length >= iRelativeThreshold) {
    114. 

  114.  				msg.push(", the first " + iRelativeThreshold + " ones were");
    115. 

  115.  			}
    116. 

  116.  			msg.push(":\n");
    117. 

  117.  			msg.push(relativeLinks.splice(0, iRelativeThreshold).join('\n'));
    118. 

  118.  		}
    119. 

  119.  		if (localPkgs.length > 0) {
    120. 

  120.  			if (msg.length > 0) {
    121. 

  121.  				msg.push("\n\n");
    122. 

  122.  			}
    123. 

  123.  			msg.push("Found ", localPkgs.length, " local resource package declarations and tried to fix them");
    124. 

  124.  			if (localPkgs.length >= iRelativeThreshold) {
    125. 

  125.  				msg.push(", the first " + iRelativeThreshold + " ones were");
    126. 

  126.  			}
    127. 

  127.  			msg.push(":\n");
    128. 

  128.  			msg.push(localPkgs.splice(0, iRelativeThreshold).join('\n'));
    129. 

  129.  		}
    130. 

  130.  	
    131. 

  131.  		if (msg.length > 0) {
    132. 

  132.  			//msg.push("\n\nYou may need to fix more URLs, e.g. image locations supplied to controls.");
    133. 

  133.  			//jQuery.sap.require("sap.ui.commons.MessageBox");
    134. 

  134.  			//sap.ui.commons.MessageBox.show(msg.join(""), sap.ui.commons.MessageBox.Icon.INFORMATION, "Snippet Import From URL: Fixed Relative URLs");
    135. 

  135.  		}
    136. 

  136.  		return html;
    137. 

  137.  	}
    138. 

  138.  	
    139. 

  139.  	function getFakeUserAgentSetter(ua) {
    140. 

  140.  		ua = ua || "MY FAKE BROWSER; Version 1.0";
    141. 

  141.  		
    142. 

  142.  		if (jQuery.browser.safari) {
    143. 

  143.  			return "var __originalNavigator = window.navigator;window.navigator = new Object();window.navigator.__proto__ = __originalNavigator;window.navigator.__defineGetter__('userAgent', function () { return '"
    144. 

  144.  					+ ua + "'; });";
    145. 

  145.  					
    146. 

  146.  		} else if ($.browser.msie) { // does not even work in IE10. But IE is anyway not THE browser for mobile tests...
    147. 

  147.  			return "alert('Overriding the user agent does not work in Internet Explorer. PLEASE consider a different browser.')"
    148. 

  148.  			
    149. 

  149.  		} else {
    150. 

  150.  			return "window.navigator.__defineGetter__('userAgent', function(){return '" + ua + "'});";
    151. 

  151.  		}
    152. 

  152.  	}
    153. 

  153.  	
    154. 

  154.  	var config = "window['sap-ui-config'] = {'xx-test-mobile':true};"; // TODO: could be overwritten
    155. 

  155.  	
    156. 

  156.  	function addFakeUserAgent(html, ua) {
    157. 

  157.  		html = html.replace("<head>", "<head><script>" + config + getFakeUserAgentSetter(ua) + "<" + "/script>");
    158. 

  158.  		return html;
    159. 

  159.  	}
    160. 

  160.  	
    161. 

  161.  	function initialize() {
    162. 

  162.  		// check whether a certain url needs to be loaded
    163. 

  163.  		var urlParts = window.location.href.split("?");
    164. 

  164.  		if ((urlParts.length > 1) && (urlParts[1].length > 4)) {
    165. 

  165.  			// URL of a page is given
    166. 

  166.  			if (jQuery.sap.startsWith(urlParts[1], "url=")) {
    167. 

  167.  				var rawUrl = urlParts[1].substr(4);
    168. 

  168.  				var url = rawUrl.replace(/%23/g, "#").replace(/%26/g, "&").replace(/%3F/g, "?").replace(/%25/g, "%");
    169. 

  169.  				initialUrl = url;
    170. 

  170.  			}
    171. 

  171.  		}
    172. 

  172.  	}
    173. 

  173.  	
    174. 

  174.  	/**
    175. 

  175.  	 * Updates the preview frame according to the selected device
    176. 

  176.  	 */
    177. 

  177.  	function updateFrameConfig() {
    178. 

  178.  		var i = lb.getSelectedIndex();
    179. 

  179.  		if (i > -1) {
    180. 

  180.  			var device = aDevices[i];
    181. 

  181.  			var width = device.landscapeDefault ? device["long"] : device["short"];
    182. 

  182.  			var height = device.landscapeDefault ? device["short"] : device["long"];
    183. 

  183.  			$frame.css({
    184. 

  184.  				"width" : width + "px",
    185. 

  185.  				"height" : height + "px"
    186. 

  186.  			});
    187. 

  187.  			updateFrameUrl(); // TODO: optimize
    188. 

  188.  	
    189. 

  189.  			rbg.setSelectedIndex(device.landscapeDefault ? 1 : 0);
    190. 

  190.  		}
    191. 

  191.  	}
    192. 

  192.  	
    193. 

  193.  	/**
    194. 

  194.  	 * Loads the currently entered URL into the test frame
    195. 

  195.  	 */
    196. 

  196.  	function updateFrameUrl() {
    197. 

  197.  		var i = lb.getSelectedIndex();
    198. 

  198.  		if (i > -1) {
    199. 

  199.  			var device = aDevices[i];
    200. 

  200.  			var url = urlField.getValue();
    201. 

  201.  			window.url = url;
    202. 

  202.  			var hasParameters = (url.indexOf("?") > -1);
    203. 

  203.  			var urlParam = (hasParameters ? "&" : "?") + "sap-ui-xx-test-mobile=true";
    204. 

  204.  			url = url + urlParam;
    205. 

  205.  	
    206. 

  206.  			var result = jQuery.sap.syncGet(url);
    207. 

  207.  			var content = "";
    208. 

  208.  			if (result.success) {
    209. 

  209.  				// great!
    210. 

  210.  				content = result.data;
    211. 

  211.  			} else {
    212. 

  212.  				jQuery.sap.require("sap.ui.commons.MessageBox");
    213. 

  213.  				sap.ui.commons.MessageBox.show("Error when loading the code from URL'" + url
    214. 

  214.  						+ ".\nDoes the file exist? Note: cross-domain URLs cannot be loaded.", sap.ui.commons.MessageBox.Icon.ERROR, "Error");
    215. 

  215.  				return;
    216. 

  216.  			}
    217. 

  217.  	
    218. 

  218.  			if (content == "") {
    219. 

  219.  				jQuery.sap.require("sap.ui.commons.MessageBox");
    220. 

  220.  				sap.ui.commons.MessageBox.show("Error when loading the code from URL'" + url
    221. 

  221.  						+ ".\nDoes the file exist? Note: cross-domain URLs cannot be loaded.", sap.ui.commons.MessageBox.Icon.ERROR, "Error");
    222. 

  222.  			} else {
    223. 

  223.  				// content loaded successfully
    224. 

  224.  				var baseUrl = url.split("?")[0].split("#")[0];
    225. 

  225.  				if (jQuery.sap.endsWithIgnoreCase(baseUrl, ".html") || jQuery.sap.endsWithIgnoreCase(baseUrl, ".htm")
    226. 

  226.  						|| jQuery.sap.endsWithIgnoreCase(baseUrl, ".epx") || jQuery.sap.endsWithIgnoreCase(baseUrl, ".asp")
    227. 

  227.  						|| jQuery.sap.endsWithIgnoreCase(baseUrl, ".aspx") || jQuery.sap.endsWithIgnoreCase(baseUrl, ".jsp")) {
    228. 

  228.  					baseUrl = baseUrl.substr(0, baseUrl.lastIndexOf("/"));
    229. 

  229.  				}
    230. 

  230.  				if (!jQuery.sap.endsWith(baseUrl, "/")) {
    231. 

  231.  					baseUrl += "/";
    232. 

  232.  				}
    233. 

  233.  				content = fixRelativeLinks(content, baseUrl);
    234. 

  234.  				content = addFakeUserAgent(content, device.ua);
    235. 

  235.  	
    236. 

  236.  				recreateIframe();
    237. 

  237.  				var frameDoc = $frame[0].contentDocument;
    238. 

  238.  				frameDoc.open("replace");
    239. 

  239.  				frameDoc.write(content);
    240. 

  240.  				frameDoc.close();
    241. 

  241.  			}
    242. 

  242.  		}
    243. 

  243.  	}
    244. 

  244.  	
    245. 

  245.  	// need to destroy the old iframe, as just re-writing its content does not clear up the JS objects reliably in Webkit
    246. 

  246.  	function recreateIframe() {
    247. 

  247.  		var width = $frame.css("width");
    248. 

  248.  		var height = $frame.css("height");
    249. 

  249.  		$frame.remove();
    250. 

  250.  		$frame = $("<iframe id='theFrame' style='width:" + width + ";height:" + height + ";'></iframe>").appendTo(document.body);
    251. 

  251.  	}
    252. 

  252.  	
    253. 

  253.  	function updateOrientation() {
    254. 

  254.  		var i = lb.getSelectedIndex();
    255. 

  255.  		if (i > -1) {
    256. 

  256.  			var device = aDevices[i];
    257. 

  257.  			var landscape = (rbg.getSelectedIndex() == 1);
    258. 

  258.  			var width = landscape ? device["long"] : device["short"];
    259. 

  259.  			var height = landscape ? device["short"] : device["long"];
    260. 

  260.  			$frame.css({
    261. 

  261.  				"width" : width + "px",
    262. 

  262.  				"height" : height + "px"
    263. 

  263.  			});
    264. 

  264.  		}
    265. 

  265.  	}
    266. 

  266.  	
    267. 

  267.  	function devAvailable() {
    268. 

  268.  		// check the existence of sapui5-internal and register the sap.ui.dev library
    269. 

  269. 		bDevAvailable = jQuery.sap.syncHead("/sapui5-internal/resources/sap/ui/dev/");
    270. 

  270. 		if (bDevAvailable) {
    271. 

  271.  			jQuery.sap.registerModulePath("sap.ui.dev", "/sapui5-internal/resources/sap/ui/dev/");
    272. 

  272.  			sap.ui.getCore().loadLibrary("sap.ui.dev");
    273. 

  273. 		}	
    274. 

  274.  		return bDevAvailable;
    275. 

  275.  	}
    276. 

  276.  	
    277. 

  277.  	function openInMobile() {
    278. 

  278.  		var sWeinreId = jQuery.sap.uid();
    279. 

  279. 		var sWeinreClientUrl = sap.ui.getCore().getConfiguration().getWeinreServer() + "/client/#" + sWeinreId;
    280. 

  280. 		
    281. 

  281. 		var oContainer = new sap.ui.layout.VerticalLayout();
    282. 

  282. 		//var href = (document.location.href.indexOf("#") > -1) ? document.location.href.split("#")[0] : document.location.href;
    283. 

  283. 		var oQRCode = new sap.ui.dev.qrcode.QRCode({data:url + "?sap-ui-weinreId=" + sWeinreId,sizeFactor:5});
    284. 

  284. 		var link = new sap.ui.commons.Link({text:"Remote Web Inspector (webkit only!)",href:sWeinreClientUrl,target:"_blank"});
    285. 

  285. 		jQuery.sap.require("sap.ui.core.Popup");
    286. 

  286. 		var oPopup = new sap.ui.core.Popup(oContainer, false, true, true).attachClosed(function(){
    287. 

  287. 			oContainer.destroy();
    288. 

  288. 		});
    289. 

  289. 		oContainer.addContent(oQRCode).addContent(link);
    290. 

  290. 		oPopup.open();
    291. 

  291.  	}
    292. 

  292.  	
    293. 

  293.  	// UI initialization
    294. 

  294.  	var url;
    295. 

  295.  	$(function() {
    296. 

  296.  		$frame = $("#theFrame");
    297. 

  297.  	
    298. 

  298.  		urlField = new sap.ui.commons.TextField("urlField", {
    299. 

  299.  			width : "100%",
    300. 

  300.  			value : initialUrl,
    301. 

  301.  			change : updateFrameUrl
    302. 

  302.  		});
    303. 

  303.  		url = initialUrl;
    304. 

  304.  		urlField.placeAt("urlFieldHolder");
    305. 

  305.  	
    306. 

  306.  		lb = new sap.ui.commons.ListBox("lb", {
    307. 

  307.  			select : updateFrameConfig,
    308. 

  308.  			visibleItems: 3
    309. 

  309.  		});
    310. 

  310.  		for ( var i = 0; i < aDevices.length; i++) {
    311. 

  311.  			lb.addItem(new sap.ui.core.ListItem("li_" + i, {
    312. 

  312.  				text : aDevices[i].name
    313. 

  313.  			}));
    314. 

  314.  		}
    315. 

  315.  		lb.setSelectedIndex(0).placeAt("configArea");
    316. 

  316.  	
    317. 

  317.  		new sap.ui.commons.Label({
    318. 

  318.  			text : "Orientation:",
    319. 

  319.  			labelFor : "rbg"
    320. 

  320.  		}).placeAt("configArea");
    321. 

  321.  	
    322. 

  322.  		rbg = new sap.ui.commons.RadioButtonGroup("rbg", {
    323. 

  323.  			select : updateOrientation,
    324. 

  324.  			items : [ new sap.ui.core.Item({
    325. 

  325.  				text : "Portrait"
    326. 

  326.  			}), new sap.ui.core.Item({
    327. 

  327.  				text : "Landscape"
    328. 

  328.  			}) ],
    329. 

  329.  			selectedIndex : (aDevices[0].landscapeDefault ? 1 : 0)
    330. 

  330.  		}).placeAt("configArea");
    331. 

  331.  		
    332. 

  332.  		if (devAvailable()) {
    333. 

  333.  			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");
    334. 

  334.  		}
    335. 

  335.  	
    336. 

  336.  		updateFrameUrl();
    337. 

  337.  		updateFrameConfig();
    338. 

  338.  	});
    339. 

  339.  	
    340. 

  340.  	initialize();
    341. 

  341. 

  342.     </script>
    343. 

  343. 

  344. 

  345. <style>
    346. 

  346. #urlFieldHolder {
    347. 

  347. 	margin-bottom: 8px;
    348. 

  348. }
    349. 

  349. 

  350. #configArea {
    351. 

  351. 	margin-bottom: 8px;
    352. 

  352. }
    353. 

  353. 

  354. #lb {
    355. 

  355. 	margin-right: 8px;
    356. 

  356. }
    357. 

  357. 

  358. #rbg {
    359. 

  359. 	margin-left: 4px;
    360. 

  360. }
    361. 

  361. 

  362. #theFrame {
    363. 

  363. 	border: 2px solid red;
    364. 

  364. }
    365. 

  365. 

  366. /* make qrcode more visible */
    367. 

  367. canvas[id*=qrcode] {
    368. 

  368. 	border: 20px solid white;
    369. 

  369. }
    370. 

  370. </style>
    371. 

  371. 

  372. </head>
    373. 

  373. <body class='sapUiBody'>
    374. 

  374. 	<div id="urlFieldHolder"></div>
    375. 

  375. 	Configuration:
    376. 

  376. 	<div id="configArea"></div>
    377. 

  377. 	<iframe id="theFrame"></iframe>
    378. 

  378. </body>
    379. 

  379. </html>
    380. 

  380.