Gutenberg / 12.1.0

Gutenberg v12.1.0

gutenberg / build / admin-manifest / index.js

index.js in Gutenberg 12.1.0, at build/admin-manifest/index.js

177 lines 5.0 KB

Raw Download Zip

1	/******/ (function() { // webpackBootstrap
2	var __webpack_exports__ = {};
3	function addManifest(manifest) {
4	const link = document.createElement('link');
5	link.rel = 'manifest';
6	link.href = `data:application/manifest+json,${encodeURIComponent(JSON.stringify(manifest))}`;
7	document.head.appendChild(link);
8	}
9
10	function addAppleTouchIcon(size, base64data) {
11	const iconLink = document.createElement('link');
12	iconLink.rel = 'apple-touch-icon';
13	iconLink.href = base64data;
14	iconLink.sizes = '180x180';
15	document.head.insertBefore(iconLink, document.head.firstElementChild);
16	}
17
18	function createSvgElement(html) {
19	const doc = document.implementation.createHTMLDocument('');
20	doc.body.innerHTML = html;
21	const {
22	firstElementChild: svgElement
23	} = doc.body;
24	svgElement.setAttribute('viewBox', '0 0 80 80');
25	return svgElement;
26	}
27
28	function createIcon(_ref) {
29	let {
30	svgElement,
31	size,
32	color,
33	backgroundColor,
34	circle
35	} = _ref;
36	return new Promise(resolve => {
37	const canvas = document.createElement('canvas');
38	const context = canvas.getContext('2d'); // Leave 1/8th padding around the logo.
39
40	const padding = size / 8; // Which leaves 3/4ths of space for the icon.
41
42	const logoSize = padding * 6; // Resize the SVG logo.
43
44	svgElement.setAttribute('width', logoSize);
45	svgElement.setAttribute('height', logoSize); // Color in the background.
46
47	svgElement.querySelectorAll('path').forEach(path => {
48	path.setAttribute('fill', backgroundColor);
49	}); // Resize the canvas.
50
51	canvas.width = size;
52	canvas.height = size; // If we're not drawing a circle, set the background color.
53
54	if (!circle) {
55	context.fillStyle = backgroundColor;
56	context.fillRect(0, 0, canvas.width, canvas.height);
57	} // Fill in the letter (W) and circle around it.
58
59
60	context.fillStyle = color;
61	context.beginPath();
62	context.arc(size / 2, size / 2, logoSize / 2 - 1, 0, 2 * Math.PI);
63	context.closePath();
64	context.fill(); // Create a URL for the SVG to load in an image element.
65
66	const svgBlob = new window.Blob([svgElement.outerHTML], {
67	type: 'image/svg+xml'
68	});
69	const url = URL.createObjectURL(svgBlob);
70	const image = document.createElement('img');
71	image.src = url;
72	image.width = logoSize;
73	image.height = logoSize;
74
75	image.onload = () => {
76	// Once the image is loaded, draw it onto the canvas.
77	context.drawImage(image, padding, padding); // Export it to a blob.
78
79	canvas.toBlob(imageBlob => {
80	// We no longer need the SVG blob url.
81	URL.revokeObjectURL(url); // Unfortunately blob URLs don't seem to work, so we have to use
82	// base64 encoded data URLs.
83
84	const reader = new window.FileReader();
85	reader.readAsDataURL(imageBlob);
86
87	reader.onloadend = () => {
88	resolve(reader.result);
89	};
90	});
91	};
92	});
93	}
94
95	function getAdminBarColors() {
96	const adminBarDummy = document.createElement('div');
97	adminBarDummy.id = 'wpadminbar';
98	document.body.appendChild(adminBarDummy);
99	const {
100	color,
101	backgroundColor
102	} = window.getComputedStyle(adminBarDummy);
103	document.body.removeChild(adminBarDummy); // Fall back to black and white if no admin/color stylesheet was loaded.
104
105	return {
106	color: color \|\| 'white',
107	backgroundColor: backgroundColor \|\| 'black'
108	};
109	}
110
111	window.addEventListener('load', () => {
112	if (!('serviceWorker' in window.navigator)) {
113	return;
114	}
115
116	const {
117	logo,
118	siteTitle,
119	adminUrl
120	} = window.wpAdminManifestL10n;
121	const manifest = {
122	name: siteTitle,
123	display: 'standalone',
124	orientation: 'portrait',
125	start_url: adminUrl,
126	// Open front-end, login page, and any external URLs in a browser
127	// modal.
128	scope: adminUrl,
129	icons: []
130	};
131	const {
132	color,
133	backgroundColor
134	} = getAdminBarColors();
135	const svgElement = createSvgElement(logo);
136	Promise.all([// The maskable icon should have its background filled. This is used
137	// for iOS. To do: check which sizes are really needed.
138	...[180, 192, 512].map(size => createIcon({
139	svgElement,
140	size,
141	color,
142	backgroundColor
143	}).then(base64data => {
144	manifest.icons.push({
145	src: base64data,
146	sizes: size + 'x' + size,
147	type: 'image/png',
148	purpose: 'maskable'
149	}); // iOS doesn't seem to look at the manifest.
150
151	if (size === 180) {
152	addAppleTouchIcon(size, base64data);
153	}
154	})), // The "normal" icon should be round. This is used for Chrome
155	// Desktop PWAs. To do: check which sizes are really needed.
156	...[180, 192, 512].map(size => createIcon({
157	svgElement,
158	size,
159	color,
160	backgroundColor,
161	circle: true
162	}).then(base64data => {
163	manifest.icons.push({
164	src: base64data,
165	sizes: size + 'x' + size,
166	type: 'image/png',
167	purpose: 'any'
168	});
169	}))]).then(() => {
170	addManifest(manifest);
171	window.navigator.serviceWorker.register(adminUrl + '?service-worker');
172	});
173	});
174	//# sourceMappingURL=index.js.map
175	(window.wp = window.wp \|\| {}).adminManifest = __webpack_exports__;
176	/******/ })()
177	;