Merge branch 'main' into add-plugins

Author: WebCoder49

.github/workflows/minify.yml

@@ -0,0 +1,22 @@
+name: Auto-minify
+on: 
+  push:
+    branches:
+      - main
+jobs:
+  Minify:
+    runs-on: ubuntu-latest
+    steps:
+      # Checks-out your repository under $GITHUB_WORKSPACE, so auto-minify job can access it
+      - uses: actions/checkout@v2
+
+      - name: Auto Minify
+        uses: nizarmah/[email protected]
+
+      # Auto commits minified files to the repository
+      # Ignore it if you don't want to commit the files to the repository 
+      - name: Auto committing minified files
+        uses: stefanzweifel/git-auto-commit-action@v4
+        with:
+          commit_message: "Auto Minified JS and CSS files"
+          branch: ${{ github.ref }}

code-input.css

@@ -89,4 +89,11 @@ code-input textarea, code-input pre {
 code-input textarea {
   resize: none;
   outline: none!important;
+}
+
+code-input:not(.code-input_registered)::before {
+  /* Display message to register */
+  content: "Use codeInput.registerTemplate to set up.";
+  display: block;
+  color: grey;
 }

code-input.js

@@ -6,6 +6,7 @@ var codeInput = {
     usedTemplates: {
     },
     defaultTemplate: undefined,
+    templateQueue: {}, // lists of elements for each unrecognised template
     plugins: { // Import a plugin from the plugins folder and it will be saved here.
     },
     Plugin: class {
@@ -78,10 +79,32 @@ var codeInput = {
             return text.replace(new RegExp("&", "g"), "&amp;").replace(new RegExp("<", "g"), "&lt;"); /* Global RegExp */
         }
 
-        /* Callbacks */
-        connectedCallback() {
-            // Added to document
-            this.template = codeInput.usedTemplates[this.getAttribute("template") || codeInput.defaultTemplate];
+        /* Get the template for this element or add to the unrecognised template queue. */
+        get_template() {
+            // Get name of template
+            let template_name;
+            if(this.getAttribute("template") == undefined) {
+                // Default
+                template_name = codeInput.defaultTemplate;
+            } else {
+                template_name = this.getAttribute("template");
+            }
+            // Get template
+            if(template_name in codeInput.usedTemplates) {
+                return codeInput.usedTemplates[template_name];
+            } else {
+                // Doesn't exist - add to queue
+                if( !(template_name in codeInput.templateQueue)) {
+                    codeInput.templateQueue[template_name] = [];
+                }
+                codeInput.templateQueue[template_name].push(this);
+                return undefined;
+            }
+            codeInput.usedTemplates[codeInput.defaultTemplate]
+        }
+        /* Set up element when a template is added */
+        setup() {
+            this.classList.add("code-input_registered"); // Remove register message
             if(this.template.preElementStyled) this.classList.add("code-input_pre-element-styled");
 
             this.plugin_evt("beforeElementsAdded");
@@ -126,7 +149,14 @@ var codeInput = {
             /* Add code from value attribute - useful for loading from backend */
             this.update(value, this);
         }
-        get observedAttributes() {
+        
+        /* Callbacks */
+        connectedCallback() {
+            // Added to document
+            this.template = this.get_template();
+            if(this.template != undefined) this.setup();
+        }
+        static get observedAttributes() {
             let attrs =  ["value", "placeholder", "lang", "template"]; // Attributes to monitor
 
             /* Add from plugins */
@@ -135,6 +165,7 @@ var codeInput = {
             }
             return attrs;
         }
+        
         attributeChangedCallback(name, oldValue, newValue) {
             if(this.isConnected) {
                 // This will sometimes be called before the element has been created, so trying to update an attribute causes an error.
@@ -207,7 +238,25 @@ var codeInput = {
     registerTemplate: function(template_name, template) {
         // Set default class
         codeInput.usedTemplates[template_name] = template;
-        codeInput.defaultTemplate = template_name;
+        // Add elements w/ template from queue
+        if(template_name in codeInput.templateQueue) {
+            for(let i in codeInput.templateQueue[template_name]) {
+                elem = codeInput.templateQueue[template_name][i];
+                elem.template = template;
+                elem.setup();
+            }
+        }
+        if(codeInput.defaultTemplate == undefined) {
+            codeInput.defaultTemplate = template_name;
+            // Add elements w/ default template from queue
+            if(undefined in codeInput.templateQueue) {
+                for(let i in codeInput.templateQueue[undefined]) {
+                    elem = codeInput.templateQueue[undefined][i];
+                    elem.template = template;
+                    elem.setup();
+                }
+            }
+        }
     },
     templates: {
         custom(highlight=function() {}, preElementStyled=true, isCode=true, includeCodeInputInHighlightFunc=false, plugins=[]) {