From cde1ba2546ee25e27e9ee38f6d52587886c1c736 Mon Sep 17 00:00:00 2001
From: PatchwerkQWER <denis@granec.cz>
Date: Sun, 6 Sep 2020 23:26:27 +0200
Subject: [PATCH] Fixed MainProgress, added position `bottom`

---
 j-MainProgress/component.css     | 1 +
 j-MainProgress/component.js      | 7 ++++---
 j-MainProgress/component.json    | 4 ++--
 j-MainProgress/dependencies.html | 4 ++--
 j-MainProgress/example.html      | 4 ++--
 j-MainProgress/readme.md         | 5 ++++-
 6 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/j-MainProgress/component.css b/j-MainProgress/component.css
index 92c32f867..564b16751 100644
--- a/j-MainProgress/component.css
+++ b/j-MainProgress/component.css
@@ -1 +1,2 @@
 .ui-mainprogress { position: fixed; left: 0; top: 0; height: 2px; z-index: 1000; background-color: #4285F4; box-shadow: 0 2px 10px rgba(66,130,244,0.8); }
+.ui-mainprogress-bottom { bottom: 0; top: unset; box-shadow: 0 -2px 10px rgba(66,130,244,0.8); }
diff --git a/j-MainProgress/component.js b/j-MainProgress/component.js
index f56d9c226..738cf74c5 100644
--- a/j-MainProgress/component.js
+++ b/j-MainProgress/component.js
@@ -1,4 +1,4 @@
-COMPONENT('mainprogress', function(self, cls) {
+COMPONENT('mainprogress', function(self, config, cls) {
 
 	var old = null;
 
@@ -7,7 +7,8 @@ COMPONENT('mainprogress', function(self, cls) {
 	self.nocompile();
 
 	self.make = function() {
-		self.aclass(cls + ' hidden');
+		var temp = config.position === 'bottom' ? ' ' + cls + '-bottom' : '';
+		self.aclass(cls + temp + ' hidden');
 	};
 
 	self.setter = function(value) {
@@ -26,4 +27,4 @@ COMPONENT('mainprogress', function(self, cls) {
 		self.element.stop().animate({ width: old + '%' }, 80).show();
 		self.tclass('hidden', old === 0 || old === 100);
 	};
-});
\ No newline at end of file
+});
diff --git a/j-MainProgress/component.json b/j-MainProgress/component.json
index 1ed50c2da..104992dd4 100644
--- a/j-MainProgress/component.json
+++ b/j-MainProgress/component.json
@@ -1,6 +1,6 @@
 {
 	"datecreated": "2017-10-31T10:57:00.000Z",
-	"dateupdated": null,
+	"dateupdated": "2020-09-06T23:25:00.000Z",
 	"name": "j-MainProgress",
 	"tags": [
 		"jcomponent"
@@ -13,4 +13,4 @@
 	"author": "Peter Širka",
 	"email": "petersirka@gmail.com",
 	"license": "https://www.totaljs.com/license/"
-}
\ No newline at end of file
+}
diff --git a/j-MainProgress/dependencies.html b/j-MainProgress/dependencies.html
index d023a7c22..51d8041ac 100644
--- a/j-MainProgress/dependencies.html
+++ b/j-MainProgress/dependencies.html
@@ -1,2 +1,2 @@
-<link href="https://cdn.componentator.com/spa.min@17.css" rel="stylesheet" type="text/css" />
-<script src="https://cdn.componentator.com/spa.min@17.js"></script>
\ No newline at end of file
+<link href="https://cdn.componentator.com/spa.min@18.css" rel="stylesheet" type="text/css" />
+<script src="https://cdn.componentator.com/spa.min@18.js"></script>
diff --git a/j-MainProgress/example.html b/j-MainProgress/example.html
index 8f15d9edc..827449041 100644
--- a/j-MainProgress/example.html
+++ b/j-MainProgress/example.html
@@ -1,8 +1,8 @@
-<div data-jc="mainprogress__percentage"></div>
+<div data---="mainprogress__percentage"></div>
 
 <script>
 	var percentage = 30;
 	setInterval(function() {
 		SET('percentage', (Math.random() * 100) >> 0);
 	}, 800);
-</script>
\ No newline at end of file
+</script>
diff --git a/j-MainProgress/readme.md b/j-MainProgress/readme.md
index 96265fb6c..cbcf2bb53 100644
--- a/j-MainProgress/readme.md
+++ b/j-MainProgress/readme.md
@@ -2,8 +2,11 @@
 
 This component is singleton. The component is visible when the value if more than `0` and less than `100`. Data-binding expects `Number`.
 
+__Configuration__:
+
+- `position` {String} optional, can be `bottom` (default: `top`)
+
 ### Author
 
 - Peter Širka <petersirka@gmail.com>
 - [License](https://www.totaljs.com/license/)
-