fix #110

Mte90 · Aug 27, 2017 · 5ce8743 · 5ce8743
1 parent ff47003
commit 5ce8743
Show file tree

Hide file tree

Showing 5 changed files with 130 additions and 44 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,6 @@
 #1.3.8
 * Feature: Black border on old strings (6 months)
+* Feature: Added layover for waiting on loading of the extension
 
 #1.3.7
 * Feature: Hide new buttons on untranslated strings

diff --git a/css/style.css b/css/style.css
@@ -0,0 +1,57 @@
+.has-glotdict td:first-child,.has-glotdict th:first-child,.box.has-glotdict{
+	border-left-width: 2px !important;
+	border-left-color: blue !important;
+}
+.has-old-string td:last-child,.has-old-string th:last-child,.box.has-old-string{
+	border-right-width: 2px !important;
+	border-right-color: black !important;
+}
+.discard-glotdict{
+	float:right;
+}
+.gd-layover{
+	height: 100%;
+	width: 100%;
+	background: #0009;
+	z-index: 99999;
+	position: absolute;
+	top: 0;
+}
+.gd-loader,
+.gd-loader:after {
+	border-radius: 50%;
+	width: 10em;
+	height: 10em;
+}
+.gd-loader {
+	margin: 60px auto;
+	font-size: 10px;
+	position: relative;
+	width: 240px;
+	height: 240px;
+	text-indent: -9999em;
+	border-top: 1.1em solid rgba(255, 255, 255, 0.2);
+	border-right: 1.1em solid rgba(255, 255, 255, 0.2);
+	border-bottom: 1.1em solid rgba(255, 255, 255, 0.2);
+	border-left: 1.1em solid #ffffff;
+	transform: translateZ(0);
+	animation: load8 1.1s infinite linear;
+}
+@-webkit-keyframes load8 {
+	0% {
+		transform: rotate(0deg);
+	}
+	100% {
+		transform: rotate(360deg);
+	}
+}
+@keyframes load8 {
+	0% {
+		-webkit-transform: rotate(0deg);
+		transform: rotate(0deg);
+	}
+	100% {
+		-webkit-transform: rotate(360deg);
+		transform: rotate(360deg);
+	}
+}
diff --git a/js/glotdict-functions.js b/js/glotdict-functions.js
@@ -187,12 +187,33 @@ function gd_get_lang_consistency() {
   return reallang;
 }
 
+/**
+ * Check if the string is the same
+ * 
+ * @param {String} myString
+ * @returns {Boolean}
+ */
 function gd_is_uppercase(myString) {
   return (myString === myString.toUpperCase());
 }
 
+/**
+ * Stop event propagation
+ * 
+ * @param {Object} e
+ * @returns {void}
+ */
 function gd_stoppropagation(e) {
   if (typeof e === 'object') {
 	e.stopImmediatePropagation();
   }
+}
+
+function gd_add_layover() {
+  jQuery('body').append('<div class="gd-layover"></div>');
+  jQuery('.gd-layover').append('<div class="gd-loader"></div>');
+}
+
+function gd_remove_layover() {
+  jQuery('.gd-layover').remove();
 }
diff --git a/js/glotdict.js b/js/glotdict.js
@@ -3,6 +3,8 @@
 
 var glotdict_version = "1.0.1";
 
+gd_add_layover();
+
 if (jQuery('.filters-toolbar:last div:first').length > 0) {
   gd_hotkeys();
   //Fix for PTE align
@@ -21,7 +23,6 @@ if (jQuery('.filters-toolbar:last div:first').length > 0) {
 	jQuery('.preview .action').trigger('click');
   }
 
-  jQuery("<style type='text/css'>.has-glotdict td:first-child,.has-glotdict th:first-child,.box.has-glotdict{border-left-width: 2px !important;border-left-color: blue !important;}.has-old-string td:last-child,.has-old-string th:last-child,.box.has-old-string{border-right-width: 2px !important;border-right-color: black !important;}.discard-glotdict{float:right;}</style>").appendTo("head");
   jQuery("<div class='box has-glotdict'></div><div>Contain a Glossary term</div><div class='box has-old-string'></div><div>The string is at least 6 months old</div>").appendTo("#legend");
 
   jQuery('.glossary-word').each(function () {
@@ -80,4 +81,6 @@ jQuery('.gp-content').on('click', '.gd-review-done', function (e) {
   alert('For a new Review or stop the review you need a refresh of the page!');
 });
 
-gd_wait_table_alter();
+gd_wait_table_alter();
+
+gd_remove_layover();
diff --git a/manifest.json b/manifest.json
@@ -1,46 +1,50 @@
 {
-    "content_scripts": [
-        {
-            "js": [
-                "js/init.js"
-            ],
-            "matches": [
-                "*://translate.wordpress.org/*"
-            ]
-        }
-    ],
-    "web_accessible_resources": [
-        "js/glotdict.js",
-        "js/glotdict-functions.js",
-        "js/glotdict-hotkey.js",
-        "js/glotdict-validation.js",
-        "js/glotdict-column.js",
-        "js/glotdict-settings.js",
-        "js/keymaster.js",
-        "js/jquery.bind-first.js",
-        "js/dompurify.js",
-        "icons/icon-16.png",
+  "content_scripts": [
+    {
+      "js": [
         "js/init.js"
-    ],
-    "version": "1.3.8",
-    "description": "Improve the workflow on translate.wordpress.org",
-    "homepage_url": "https://github.com/Mte90/GlotDict",
-    "manifest_version": 2,
-    "icons": {
-        "48": "icons/icon-48.png",
-        "128": "icons/icon-128.png",
-        "16": "icons/icon-16.png"
-    },
-    "name": "GlotDict",
-    "background": {
-        "scripts": [
-            "js/block-social-footer.js"
-        ]
-    },
-    "permissions": [
-        "<all_urls>",
-        "webRequest",
-        "webRequestBlocking",
-        "contextMenus"
+      ],
+      "css": [
+        "css/style.css"
+      ],
+      "matches": [
+        "*://translate.wordpress.org/*"
+      ]
+    }
+  ],
+  "web_accessible_resources": [
+    "js/glotdict.js",
+    "js/glotdict-functions.js",
+    "js/glotdict-hotkey.js",
+    "js/glotdict-validation.js",
+    "js/glotdict-column.js",
+    "js/glotdict-settings.js",
+    "js/keymaster.js",
+    "js/jquery.bind-first.js",
+    "js/dompurify.js",
+    "icons/icon-16.png",
+    "css/style.css",
+    "js/init.js"
+  ],
+  "version": "1.3.8",
+  "description": "Improve the workflow on translate.wordpress.org",
+  "homepage_url": "https://github.com/Mte90/GlotDict",
+  "manifest_version": 2,
+  "icons": {
+    "48": "icons/icon-48.png",
+    "128": "icons/icon-128.png",
+    "16": "icons/icon-16.png"
+  },
+  "name": "GlotDict",
+  "background": {
+    "scripts": [
+      "js/block-social-footer.js"
     ]
+  },
+  "permissions": [
+    "<all_urls>",
+    "webRequest",
+    "webRequestBlocking",
+    "contextMenus"
+  ]
 }