Add loading overlay js/css

Braulio Bhavamitra
1 parent 682ee5be
Showing 5 changed files with 46 additions and 0 deletions Show diff stats
public/images/loading-overlay.gif
public/javascripts/application.js
public/javascripts/loading-overlay.js
public/stylesheets/application.css
public/stylesheets/loading-overlay.scss
@@ -21,6 +21,7 @@
 * noosfero libraries
 *= require_self
 *= require modal.js
+*= require loading-overlay.js
 * views speficics
 *= require add-and-join.js
 *= require report-abuse.js
@@ -0,0 +1,36 @@
+if (typeof loading_overlay === 'undefined') {
+
+// block user actions while making a post. Also indicate the network transaction
+loading_overlay = {
+
+  show: function (selector) {
+    var element = jQuery(selector);
+    if (element.length > 0) {
+      var overlay = jQuery('<div>', {
+        class: 'loading-overlay',
+        css: {
+          width: element.outerWidth(),
+          height: element.outerHeight(),
+          left: element.position().left,
+          top: element.position().top,
+          marginLeft: parseFloat(element.css('margin-left')),
+          marginTop: parseFloat(element.css('margin-top')),
+          marginRight: parseFloat(element.css('margin-right')),
+          marginBottom: parseFloat(element.css('margin-bottom')),
+        },
+      }).appendTo(element).get(0);
+
+      overlay.dest = element;
+      element.loading_overlay = overlay;
+    }
+  },
+
+  hide: function (selector) {
+    var element = jQuery(selector);
+    var overlay = element.find('.loading-overlay');
+    overlay.remove();
+  },
+
+};
+
+}
@@ -11,6 +11,7 @@
  * noosfero libraries
  *= require_self
  *= require iepngfix/iepngfix
+ *= require loading-overlay
  * views specifics
  *= require chat
  *= require search
@@ -0,0 +1,8 @@
+
+.loading-overlay {
+  position: absolute;
+  background-color: #eee; /* while the image don't load */
+  background-image: url(/images/loading-overlay.gif);
+  opacity: 0.40;
+  z-index: 10;
+}
...	...	@@ -21,6 +21,7 @@
21	21	* noosfero libraries
22	22	*= require_self
23	23	*= require modal.js
	24	+*= require loading-overlay.js
24	25	* views speficics
25	26	*= require add-and-join.js
26	27	*= require report-abuse.js
...	...
...	...	@@ -0,0 +1,36 @@
	1	+if (typeof loading_overlay === 'undefined') {
	2	+
	3	+// block user actions while making a post. Also indicate the network transaction
	4	+loading_overlay = {
	5	+
	6	+ show: function (selector) {
	7	+ var element = jQuery(selector);
	8	+ if (element.length > 0) {
	9	+ var overlay = jQuery('<div>', {
	10	+ class: 'loading-overlay',
	11	+ css: {
	12	+ width: element.outerWidth(),
	13	+ height: element.outerHeight(),
	14	+ left: element.position().left,
	15	+ top: element.position().top,
	16	+ marginLeft: parseFloat(element.css('margin-left')),
	17	+ marginTop: parseFloat(element.css('margin-top')),
	18	+ marginRight: parseFloat(element.css('margin-right')),
	19	+ marginBottom: parseFloat(element.css('margin-bottom')),
	20	+ },
	21	+ }).appendTo(element).get(0);
	22	+
	23	+ overlay.dest = element;
	24	+ element.loading_overlay = overlay;
	25	+ }
	26	+ },
	27	+
	28	+ hide: function (selector) {
	29	+ var element = jQuery(selector);
	30	+ var overlay = element.find('.loading-overlay');
	31	+ overlay.remove();
	32	+ },
	33	+
	34	+};
	35	+
	36	+}
...	...
...	...	@@ -11,6 +11,7 @@
11	11	* noosfero libraries
12	12	*= require_self
13	13	*= require iepngfix/iepngfix
	14	+ *= require loading-overlay
14	15	* views specifics
15	16	*= require chat
16	17	*= require search
...	...
...	...	@@ -0,0 +1,8 @@
	1	+
	2	+.loading-overlay {
	3	+ position: absolute;
	4	+ background-color: #eee; /* while the image don't load */
	5	+ background-image: url(/images/loading-overlay.gif);
	6	+ opacity: 0.40;
	7	+ z-index: 10;
	8	+}
...	...