From 34a0d61bf94578dd219e6b1e6e3007a76b870650 Mon Sep 17 00:00:00 2001 From: Luis Ball Date: Mon, 22 Feb 2021 13:23:09 -0500 Subject: [PATCH 1/3] fix(injectBaseStylesheet): address style injection issue Fix a bug where getElementByTagName() was attempting to access an attr, .innerHTML, that was not defined. Instead, create and inject a new style tag as a child to the head. --- package.json | 3 ++- src/js/injectBaseStylesheet.js | 9 +++++---- 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index b1865a06..c4e99529 100644 --- a/package.json +++ b/package.json @@ -4,7 +4,8 @@ "description": "Easily add \"zoom on hover\" functionality to your site's images. Lightweight, no-dependency JavaScript.", "contributors": [ "Frederick Fogerty (https://github.com/frederickfogerty)", - "Sherwin Heydarbeygi (https://github.com/sherwinski)" + "Sherwin Heydarbeygi (https://github.com/sherwinski)", + "Luis Ball (https://github.com/luqven)" ], "main": "lib/Drift.js", "module": "es/Drift.js", diff --git a/src/js/injectBaseStylesheet.js b/src/js/injectBaseStylesheet.js index 63fee620..7d8cdd11 100644 --- a/src/js/injectBaseStylesheet.js +++ b/src/js/injectBaseStylesheet.js @@ -55,13 +55,14 @@ export default function injectBaseStylesheet() { return; } + // create the injected styles const styleEl = document.createElement("style"); - styleEl.type = "text/css"; styleEl.classList = "drift-base-styles"; - styleEl.textContent = RULES; - const head = document.head; + // prepend them to the document head's first child + const head = document.head; const allHeadElements = head.getElementsByTagName("*"); - allHeadElements.innerHTML = styleEl + allHeadElements.innerHTML; + const firstItem = allHeadElements.item(0); + firstItem.outerHTML = styleEl.outerHTML + firstItem.outerHTML; } From ac55fb34c277f38587b4e0448a59d8c73ac2c2fc Mon Sep 17 00:00:00 2001 From: Luis Ball Date: Wed, 24 Feb 2021 09:37:00 -0500 Subject: [PATCH 2/3] fix(index html): add csp hash Add styles hash to csp to avoid it getting blocked by browser --- index.html | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/index.html b/index.html index 2d5ea60e..0e3b7abd 100644 --- a/index.html +++ b/index.html @@ -7,7 +7,12 @@ + + Drift Playground From 0c47e9ab57e39bf63e4bc448d604fef11c9071d1 Mon Sep 17 00:00:00 2001 From: Luis Ball Date: Fri, 26 Feb 2021 15:44:18 -0500 Subject: [PATCH 3/3] chore: prettier format file and remove unused hash --- index.html | 278 +++++++++++++++++++++++++++-------------------------- 1 file changed, 144 insertions(+), 134 deletions(-) diff --git a/index.html b/index.html index 0e3b7abd..0280445d 100644 --- a/index.html +++ b/index.html @@ -1,139 +1,149 @@ - + - - - - - - - - - - + + + + + + + + - Drift Playground - - - - - -
- - -
-
-

Drift Demo

-

This is a demo of Drift, a simple, lightweight, no-dependencies JavaScript "zoom on hover" tool from - imgix. Move your mouse over the image (or touch it) to see it in action.

-

This demo uses the simple included theme, but it's very easy to extend and customize to fit your needs. You can - learn more and download it here.

-

(Psst… try making your browser window smaller!)

-
- - - imgix - -
-
- - - - - + Drift Playground + + + + + +
+ + +
+
+

Drift Demo

+

+ This is a demo of Drift, a simple, lightweight, no-dependencies JavaScript "zoom on hover" tool from + imgix. Move your mouse over the image (or touch it) to see it in action. +

+

+ This demo uses the simple included theme, but it's very easy to extend and customize to fit your needs. You + can learn more and download it here. +

+

(Psst… try making your browser window smaller!)

+
+ + + imgix + +
+
+ + + +