Fixed MainProgress, added position bottom

totaljs · Sep 6, 2020 · cde1ba2 · cde1ba2
1 parent 35bba1d
commit cde1ba2
Show file tree

Hide file tree

Showing 6 changed files with 15 additions and 10 deletions.
diff --git 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
@@ -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);
 	};
-});
+});
diff --git 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/"
-}
+}
diff --git 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>
+<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
@@ -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>
+</script>
diff --git 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/)
-