fix(storefront): BCTHEME-940 optimize usage of jsTree library (#2145)

bigcommerce · Dec 8, 2021 · 190e195 · 190e195
1 parent 953f4d1
commit 190e195
Show file tree

Hide file tree

Showing 6 changed files with 27 additions and 26 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,6 +5,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ## Draft
+- Optimized usage of jsTree library. [#2145](https://github.com/bigcommerce/cornerstone/pull/2145)
 - Replace schema microdata with LD+JSON tag. [#2138](https://github.com/bigcommerce/cornerstone/pull/2138)
 - Translation Gap: Checkbox Option selection on Product. [#2063](https://github.com/bigcommerce/cornerstone/pull/2063)
 - Admin Bar displays regardless of setting. [#2144](https://github.com/bigcommerce/cornerstone/pull/2144)

diff --git a/assets/scss/theme.scss b/assets/scss/theme.scss
@@ -83,5 +83,3 @@
 // -----------------------------------------------------------------------------
 
 @import "layouts/layouts"; // 1
-
-@import "vendor/jstree/style";
diff --git a/assets/scss/vendor/jstree/style.scss → assets/scss/vendor/jstree/style.css b/assets/scss/vendor/jstree/style.scss → assets/scss/vendor/jstree/style.css
@@ -471,7 +471,7 @@
 
 .jstree-default .jstree-node,
 .jstree-default .jstree-icon {
-    background-image: url("../img/vendor/jstree/32px.png");
+    background-image: url("/assets/img/vendor/jstree/32px.png");
 }
 
 .jstree-default .jstree-node {
@@ -606,15 +606,15 @@
 }
 
 .jstree-default > .jstree-container-ul .jstree-loading > .jstree-ocl {
-    background: url("../img/vendor/jstree/throbber.gif") center center no-repeat;
+    background: url("/assets/img/vendor/jstree/throbber.gif") center center no-repeat;
 }
 
 .jstree-default .jstree-file {
-    background: url("../img/vendor/jstree/32px.png") -100px -68px no-repeat;
+    background: url("/assets/img/vendor/jstree/32px.png") -100px -68px no-repeat;
 }
 
 .jstree-default .jstree-folder {
-    background: url("../img/vendor/jstree/32px.png") -260px -4px no-repeat;
+    background: url("/assets/img/vendor/jstree/32px.png") -260px -4px no-repeat;
 }
 
 .jstree-default > .jstree-container-ul > .jstree-node {
@@ -630,7 +630,7 @@
 #jstree-dnd.jstree-default .jstree-ok,
 #jstree-dnd.jstree-default .jstree-er {
     background-color: transparent;
-    background-image: url("../img/vendor/jstree/32px.png");
+    background-image: url("/assets/img/vendor/jstree/32px.png");
     background-repeat: no-repeat;
 }
 
@@ -691,7 +691,7 @@
 
 .jstree-default-small .jstree-node,
 .jstree-default-small .jstree-icon {
-    background-image: url("../img/vendor/jstree/32px.png");
+    background-image: url("/assets/img/vendor/jstree/32px.png");
 }
 
 .jstree-default-small .jstree-node {
@@ -826,15 +826,15 @@
 }
 
 .jstree-default-small > .jstree-container-ul .jstree-loading > .jstree-ocl {
-    background: url("../img/vendor/jstree/throbber.gif") center center no-repeat;
+    background: url("/assets/img/vendor/jstree/throbber.gif") center center no-repeat;
 }
 
 .jstree-default-small .jstree-file {
-    background: url("../img/vendor/jstree/32px.png") -103px -71px no-repeat;
+    background: url("/assets/img/vendor/jstree/32px.png") -103px -71px no-repeat;
 }
 
 .jstree-default-small .jstree-folder {
-    background: url("../img/vendor/jstree/32px.png") -263px -7px no-repeat;
+    background: url("/assets/img/vendor/jstree/32px.png") -263px -7px no-repeat;
 }
 
 .jstree-default-small > .jstree-container-ul > .jstree-node {
@@ -850,7 +850,7 @@
 #jstree-dnd.jstree-default-small .jstree-ok,
 #jstree-dnd.jstree-default-small .jstree-er {
     background-color: transparent;
-    background-image: url("../img/vendor/jstree/32px.png");
+    background-image: url("/assets/img/vendor/jstree/32px.png");
     background-repeat: no-repeat;
 }
 
@@ -911,7 +911,7 @@
 
 .jstree-default-large .jstree-node,
 .jstree-default-large .jstree-icon {
-    background-image: url("../img/vendor/jstree/32px.png");
+    background-image: url("/assets/img/vendor/jstree/32px.png");
 }
 
 .jstree-default-large .jstree-node {
@@ -1046,15 +1046,15 @@
 }
 
 .jstree-default-large > .jstree-container-ul .jstree-loading > .jstree-ocl {
-    background: url("../img/vendor/jstree/throbber.gif") center center no-repeat;
+    background: url("/assets/img/vendor/jstree/throbber.gif") center center no-repeat;
 }
 
 .jstree-default-large .jstree-file {
-    background: url("../img/vendor/jstree/32px.png") -96px -64px no-repeat;
+    background: url("/assets/img/vendor/jstree/32px.png") -96px -64px no-repeat;
 }
 
 .jstree-default-large .jstree-folder {
-    background: url("../img/vendor/jstree/32px.png") -256px 0 no-repeat;
+    background: url("/assets/img/vendor/jstree/32px.png") -256px 0 no-repeat;
 }
 
 .jstree-default-large > .jstree-container-ul > .jstree-node {
@@ -1070,7 +1070,7 @@
 #jstree-dnd.jstree-default-large .jstree-ok,
 #jstree-dnd.jstree-default-large .jstree-er {
     background-color: transparent;
-    background-image: url("../img/vendor/jstree/32px.png");
+    background-image: url("/assets/img/vendor/jstree/32px.png");
     background-repeat: no-repeat;
 }
 
@@ -1111,13 +1111,13 @@
     }
 
     #jstree-dnd.jstree-dnd-responsive > .jstree-ok {
-        background-image: url("../img/vendor/jstree/40px.png");
+        background-image: url("/assets/img/vendor/jstree/40px.png");
         background-position: 0 -200px;
         background-size: 120px 240px;
     }
 
     #jstree-dnd.jstree-dnd-responsive > .jstree-er {
-        background-image: url("../img/vendor/jstree/40px.png");
+        background-image: url("/assets/img/vendor/jstree/40px.png");
         background-position: -40px -200px;
         background-size: 120px 240px;
     }
@@ -1131,7 +1131,7 @@
 }
 @media (max-width: 768px) {
     .jstree-default-responsive .jstree-icon {
-        background-image: url("../img/vendor/jstree/40px.png");
+        background-image: url("/assets/img/vendor/jstree/40px.png");
     }
 
     .jstree-default-responsive .jstree-node,
@@ -1258,7 +1258,7 @@
     .jstree-default-responsive .jstree-node > .jstree-ocl,
     .jstree-default-responsive .jstree-themeicon,
     .jstree-default-responsive .jstree-checkbox {
-        background-image: url("../img/vendor/jstree/40px.png");
+        background-image: url("/assets/img/vendor/jstree/40px.png");
         background-size: 120px 240px;
     }
 
@@ -1286,12 +1286,12 @@
     }
 
     .jstree-default-responsive .jstree-file {
-        background: url("../img/vendor/jstree/40px.png") 0 -160px no-repeat;
+        background: url("/assets/img/vendor/jstree/40px.png") 0 -160px no-repeat;
         background-size: 120px 240px;
     }
 
     .jstree-default-responsive .jstree-folder {
-        background: url("../img/vendor/jstree/40px.png") -40px -40px no-repeat;
+        background: url("/assets/img/vendor/jstree/40px.png") -40px -40px no-repeat;
         background-size: 120px 240px;
     }
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -15,7 +15,7 @@
     "formdata-polyfill": "^3.0.20",
     "foundation-sites": "^5.5.3",
     "jquery": "^3.5.1",
-    "jstree": "github:vakata/jstree",
+    "jstree": "^3.3.12",
     "lazysizes": "5.2.2",
     "lodash": "^4.17.21",
     "nanobar": "^0.4.2",

diff --git a/templates/pages/search.html b/templates/pages/search.html
@@ -15,6 +15,7 @@
 {{/partial}}
 
 {{#partial "page"}}
+{{{ stylesheet '/assets/scss/vendor/jstree/style.css' }}}
 {{> components/common/breadcrumbs breadcrumbs=breadcrumbs}}
 <section class="nav">
     {{#if forms.search.query}}
Original file line number	Diff line number	Diff line change
Expand Up		@@ -83,5 +83,3 @@
		// -----------------------------------------------------------------------------

		@import "layouts/layouts"; // 1

		@import "vendor/jstree/style";