Make tool bar sticky

akileng56 · May 9, 2018 · 9ba9754 · 9ba9754
1 parent 2a3026c
commit 9ba9754
Show file tree

Hide file tree

Showing 9 changed files with 30 additions and 9 deletions.
diff --git a/demo/build/darkroom.css b/demo/build/darkroom.css
diff --git a/demo/build/darkroom.js b/demo/build/darkroom.js
diff --git a/demo/index.html b/demo/index.html
@@ -132,6 +132,7 @@ <h2>Contributing</h2>
   </div>
 
   <script src="./vendor/fabric.js"></script>
+  <script src="./vendor/stickyfill.min.js"></script>
   <script src="./build/darkroom.js"></script>
 
   <script>

diff --git a/demo/vendor/stickyfill.min.js b/demo/vendor/stickyfill.min.js
diff --git a/lib/css/_toolbar.scss b/lib/css/_toolbar.scss
@@ -4,8 +4,9 @@
 .darkroom-toolbar {
   display: flex;
   flex-wrap: wrap;
-  position: initial;
-  top: -45px;
+  position: sticky;
+  position: -webkit-sticky;
+  top: 10px;
   left: 0;
   background: #444;
   height: auto;

diff --git a/lib/js/core/darkroom.js b/lib/js/core/darkroom.js
@@ -293,6 +293,9 @@
       imageElement.style.display = 'none';
       mainContainerElement.appendChild(imageElement);
 
+      Stickyfill.add(toolbarElement);
+      Stickyfill.refreshAll();
+
       // Instanciate object from elements
       this.containerElement = mainContainerElement;
       this.originalImageElement = imageElement;

diff --git a/lib/js/plugins/darkroom.crop.js b/lib/js/plugins/darkroom.crop.js
@@ -50,7 +50,7 @@
       snapshot.src = canvas.toDataURL({
         left: left,
         top: top,
-        width: top,
+        width: width,
         height: height
       });
     }

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -12,7 +12,8 @@
   "dependencies": {
     "eslint": "^4.18.2",
     "eslint-config-airbnb-base": "^12.1.0",
-    "eslint-plugin-import": "^2.9.0"
+    "eslint-plugin-import": "^2.9.0",
+    "stickyfilljs": "^2.0.3"
   },
   "devDependencies": {
     "gulp": "^3.9.0",