From f0db558176e514a15dbb954e8cfc9048c2931b13 Mon Sep 17 00:00:00 2001
From: Filip Chalupa <chalupa.filip@gmail.com>
Date: Mon, 10 Jun 2019 17:12:19 +0200
Subject: [PATCH 1/2] Shapes: js not needed

- faster, better caching
---
 src/scripts/components/{Shapes.ts => ShapesIE.ts} | 15 ++++++++++-----
 src/scripts/index.ts                              |  6 +++---
 src/sprites/plus.svg                              |  2 +-
 src/styles/parts/shape.sass                       |  4 +---
 src/templates/layouts/default.pug                 |  2 +-
 src/templates/mixins/shape.pug                    |  5 ++++-
 6 files changed, 20 insertions(+), 14 deletions(-)
 rename src/scripts/components/{Shapes.ts => ShapesIE.ts} (67%)

diff --git a/src/scripts/components/Shapes.ts b/src/scripts/components/ShapesIE.ts
similarity index 67%
rename from src/scripts/components/Shapes.ts
rename to src/scripts/components/ShapesIE.ts
index a1a9003..4eb549b 100644
--- a/src/scripts/components/Shapes.ts
+++ b/src/scripts/components/ShapesIE.ts
@@ -1,19 +1,23 @@
 import { Component } from '@mangoweb/scripts-base'
 
-interface ShapesData {
+interface ShapesIEData {
 	url: string
 }
 
 /**
- * Shapes component class
+ * ShapesIE component class (Internet Explorer fallback)
  *
  * - injects SVG sprite into body
  */
-export default class Shapes extends Component<ShapesData> {
+export default class ShapesIE extends Component<ShapesIEData> {
 
-	static componentName = 'Shapes'
+	static componentName = 'ShapesIE'
 
 	init() {
+		if (window.navigator.userAgent.indexOf('MSIE ') < 0 && !navigator.userAgent.match(/Trident.*rv\:11\./)) {
+			return
+		}
+
 		document.implementation.hasFeature('http://www.w3.org/TR/SVG11/feature#BasicStructure', '1.1') && this.injectSprite()
 	}
 
@@ -34,7 +38,8 @@ export default class Shapes extends Component<ShapesData> {
 			if (el) {
 				body.insertBefore(el, body.firstChild)
 			}
-		}).catch(() => {
+		}).catch((error) => {
+			console.error(error)
 			setTimeout(() => this.injectSprite(), 1e4)
 		})
 	}
diff --git a/src/scripts/index.ts b/src/scripts/index.ts
index 4b55c7e..2a98478 100644
--- a/src/scripts/index.ts
+++ b/src/scripts/index.ts
@@ -3,11 +3,11 @@ import { initializeComponents } from '@mangoweb/scripts-base'
 import './plugins'
 
 import Example from './components/Example'
-import Shapes from './components/Shapes'
+import ShapesIE from './components/ShapesIE'
 
 
 // Sort the components alphabetically…
 initializeComponents([
 	Example,
-	Shapes,
-], 'initComponents')
+	ShapesIE,
+])
diff --git a/src/sprites/plus.svg b/src/sprites/plus.svg
index b98de40..cc8bd28 100644
--- a/src/sprites/plus.svg
+++ b/src/sprites/plus.svg
@@ -1,3 +1,3 @@
 <svg height="21" width="21" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 21 21">
-	<path fill="#266db2" fill-rule="evenodd" d="M9 9H1c-.6 0-1 .4-1 1v1c0 .6.5 1 1 1h8v8c0 .6.4 1 1 1h1c.6 0 1-.4 1-1v-8h8c.6 0 1-.4 1-1v-1c0-.6-.4-1-1-1h-8V1c0-.6-.4-1-1-1h-1c-.6 0-1 .5-1 1v8zm0 0"/>
+	<path fill="currentColor" fill-rule="evenodd" d="M9 9H1c-.6 0-1 .4-1 1v1c0 .6.5 1 1 1h8v8c0 .6.4 1 1 1h1c.6 0 1-.4 1-1v-8h8c.6 0 1-.4 1-1v-1c0-.6-.4-1-1-1h-8V1c0-.6-.4-1-1-1h-1c-.6 0-1 .5-1 1v8zm0 0"/>
 </svg>
diff --git a/src/styles/parts/shape.sass b/src/styles/parts/shape.sass
index c35ae54..1fb63dc 100644
--- a/src/styles/parts/shape.sass
+++ b/src/styles/parts/shape.sass
@@ -11,9 +11,7 @@
 
 	// Shapes default dimensions
 	&-plus
-		+size(20px)
-		stroke: #000
-		fill: #000
+		+size(em(21px))
 
 
 	// ... here comes other shape dimensions
diff --git a/src/templates/layouts/default.pug b/src/templates/layouts/default.pug
index 2e7a31c..39a32ef 100644
--- a/src/templates/layouts/default.pug
+++ b/src/templates/layouts/default.pug
@@ -30,7 +30,7 @@ html(lang=manifest.lang)
 		// Queue of JS components to initialize
 		script.
 			initComponents = [
-				{ name: 'Shapes', data: { url: '#{assetPath}/sprites/shapes.svg' } }
+				{ name: 'ShapesIE', data: { url: '#{assetPath}/sprites/shapes.svg' } }
 			]
 
 		//- Application init
diff --git a/src/templates/mixins/shape.pug b/src/templates/mixins/shape.pug
index 6f8c164..e64e3df 100644
--- a/src/templates/mixins/shape.pug
+++ b/src/templates/mixins/shape.pug
@@ -5,4 +5,7 @@ mixin shape(name, title)
 		if title
 			title= title
 
-		use(xlink:href='#shape-' + name)
+		use(xlink:href=`${assetPath}/sprites/shapes.svg#shape-${name}`)
+
+		//- IE fallback
+		use(xlink:href=`#shape-${name}`)

From 91de88ccb1d1d0e5b495b9709b54ee2cee30abd9 Mon Sep 17 00:00:00 2001
From: Filip Chalupa <chalupa.filip@gmail.com>
Date: Tue, 11 Jun 2019 13:22:16 +0200
Subject: [PATCH 2/2] Shapes: hasFeature call not needed

---
 src/scripts/components/ShapesIE.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/scripts/components/ShapesIE.ts b/src/scripts/components/ShapesIE.ts
index 4eb549b..11818c4 100644
--- a/src/scripts/components/ShapesIE.ts
+++ b/src/scripts/components/ShapesIE.ts
@@ -18,7 +18,7 @@ export default class ShapesIE extends Component<ShapesIEData> {
 			return
 		}
 
-		document.implementation.hasFeature('http://www.w3.org/TR/SVG11/feature#BasicStructure', '1.1') && this.injectSprite()
+		this.injectSprite()
 	}
 
 	injectSprite(): void {