Merge pull request #108 from WebCoder49/allow-lazy-loading

Allow lazy loading; Clean up code-input loading appearance

Author: WebCoder49

code-input.css

@@ -30,20 +30,16 @@ code-input {
 
 
 code-input:not(.code-input_loaded) {
-  margin: 0px!important;
-  margin-bottom: calc(-1 * var(--padding, 16px))!important;
   padding: var(--padding, 16px)!important;
-  border: 0;
 }
 
 code-input textarea, code-input:not(.code-input_pre-element-styled) pre code, code-input.code-input_pre-element-styled pre {
   /* Both elements need the same text and space styling so they are directly on top of each other */
   margin: 0px!important;
   padding: var(--padding, 16px)!important;
   border: 0;
-  min-width: 100%;
-  min-height: 100%;
-  box-sizing: border-box; /* Don't need to worry about padding to calculate width! */
+  min-width: calc(100% - var(--padding) * 2);
+  min-height: calc(100% - var(--padding) * 2);
   overflow: hidden;
   resize: none;
   grid-row: 1;
@@ -87,13 +83,6 @@ code-input pre {
   z-index: 0;
 }
 
-code-input:not(.code-input_loaded) pre, code-input:not(.code-input_loaded) textarea {
-  opacity: 0;
-}
-code-input:not(.code-input_loaded)::before {
-  color: #ccc;
-}
-
 /* Make textarea almost completely transparent, except for caret and placeholder */
 
 code-input textarea {
@@ -119,11 +108,29 @@ code-input textarea {
   outline: none!important;
 }
 
-code-input:not(.code-input_registered)::before {
+/* Before registering give a hint about how to register. */
+code-input:not(.code-input_registered) {
+  overflow: hidden;
+  display: block;
+  box-sizing: border-box; /* Include padding in width/height */
+}
+
+code-input:not(.code-input_registered)::after {
   /* Display message to register */
   content: "Use codeInput.registerTemplate to set up.";
   display: block;
-  color: grey;
+  position: absolute;
+  bottom: var(--padding);
+  left: var(--padding);
+  width: calc(100% - 2 * var(--padding));
+
+  border-top: 1px solid grey;
+  outline: var(--padding) solid white;
+  background-color: white;
+}
+
+code-input:not(.code-input_loaded) pre, code-input:not(.code-input_loaded) textarea {
+  opacity: 0;
 }
 
 /* Contains dialog boxes that might appear as the result of a plugin.

code-input.js

@@ -521,11 +521,13 @@ var codeInput = {
 
             this.syncSize();
 
-            // Scroll to the caret by focusing, though this shouldn't count as a focus event
-            this.passEventsToTextarea = false;
-            this.textareaElement.blur();
-            this.textareaElement.focus();
-            this.passEventsToTextarea = true;
+            // If editing here, scroll to the caret by focusing, though this shouldn't count as a focus event
+            if(this.textareaElement === document.activeElement) {
+                this.passEventsToTextarea = false;
+                this.textareaElement.blur();
+                this.textareaElement.focus();
+                this.passEventsToTextarea = true;
+            }
 
             this.pluginEvt("afterHighlight");
         }
@@ -990,16 +992,12 @@ var codeInput = {
      * has loaded (or now if it has already loaded)
      */
     runOnceWindowLoaded(callback, codeInputElem) {
-        if(codeInput.windowLoaded) {
+        if(document.readyState == "complete") {
             callback(); // Fully loaded
         } else {
             window.addEventListener("load", callback);
         }
-    },
-    windowLoaded: false
+    }
 }
-window.addEventListener("load", function() {
-    codeInput.windowLoaded = true;
-});
 
 customElements.define("code-input", codeInput.CodeInput);

tests/prism.html

@@ -48,6 +48,7 @@ <h4><a href="hljs.html">Test for highlight.js</a></h4>
 // A third line with &lt;html> tags</code-input>
         <input type="submit" value="Search Google For Code"/>
     </form>
+
     <script>
         beginTest(false);
     </script>