From 919f8cb329be5fdcdad4c8258ffa5421fdff4a93 Mon Sep 17 00:00:00 2001
From: yuchuan <isyuchuan@foxmail.com>
Date: Thu, 4 Nov 2021 21:56:41 +0800
Subject: [PATCH] feat: add loop play

---
 README.md   |  3 ++-
 termynal.js | 20 +++++++++++++-------
 2 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/README.md b/README.md
index 9397a6a..99e1bc3 100644
--- a/README.md
+++ b/README.md
@@ -68,6 +68,7 @@ The following settings are available:
 | `progressLength` | number | `40` | Number of characters displayed as progress bar. |
 | `progressChar` | string | `'█'` | Character to use for progress bar. |
 | `cursor` | string | `'▋'` | Character to use for cursor. |
+| `loop` | boolean | `false` | loop for play |
 | `noInit` | boolean | `false` | Don't initialise the animation on load. This means you can call `Termynal.init()` yourself whenever and however you want.
 | `lineData` | Object[] | `null` | [Dynamically load](#dynamically-loading-lines) lines at instantiation.
 
@@ -162,4 +163,4 @@ var termynal = new Termynal('#termynal',
         ]
     }
 )
-```
\ No newline at end of file
+```
diff --git a/termynal.js b/termynal.js
index 77ec6cb..97bcc2a 100644
--- a/termynal.js
+++ b/termynal.js
@@ -26,6 +26,7 @@ class Termynal {
      * @param {string} options.cursor – Character to use for cursor, defaults to ▋.
      * @param {Object[]} lineData - Dynamically loaded line data objects.
      * @param {boolean} options.noInit - Don't initialise the animation.
+     * @param {boolean} options.loop - Loop for play
      */
     constructor(container = '#termynal', options = {}) {
         this.container = (typeof container === 'string') ? document.querySelector(container) : container;
@@ -40,10 +41,12 @@ class Termynal {
             || parseFloat(this.container.getAttribute(`${this.pfx}-progressLength`)) || 40;
         this.progressChar = options.progressChar
             || this.container.getAttribute(`${this.pfx}-progressChar`) || '█';
-		this.progressPercent = options.progressPercent
+		    this.progressPercent = options.progressPercent
             || parseFloat(this.container.getAttribute(`${this.pfx}-progressPercent`)) || 100;
         this.cursor = options.cursor
             || this.container.getAttribute(`${this.pfx}-cursor`) || '▋';
+        this.loop = options.loop
+            || this.container.getAttribute(`${this.pfx}-loop`) || false;
         this.lineData = this.lineDataToElements(options.lineData || []);
         if (!options.noInit) this.init()
     }
@@ -55,14 +58,14 @@ class Termynal {
         // Appends dynamically loaded lines to existing line elements.
         this.lines = [...this.container.querySelectorAll(`[${this.pfx}]`)].concat(this.lineData);
 
-        /** 
+        /**
          * Calculates width and height of Termynal container.
          * If container is empty and lines are dynamically loaded, defaults to browser `auto` or CSS.
-         */ 
+         */
         const containerStyle = getComputedStyle(this.container);
-        this.container.style.width = containerStyle.width !== '0px' ? 
+        this.container.style.width = containerStyle.width !== '0px' ?
             containerStyle.width : undefined;
-        this.container.style.minHeight = containerStyle.height !== '0px' ? 
+        this.container.style.minHeight = containerStyle.height !== '0px' ?
             containerStyle.height : undefined;
 
         this.container.setAttribute('data-termynal', '');
@@ -98,6 +101,9 @@ class Termynal {
 
             line.removeAttribute(`${this.pfx}-cursor`);
         }
+        if(this.loop) {
+            this.init();
+        }
     }
 
     /**
@@ -151,7 +157,7 @@ class Termynal {
 
     /**
      * Converts line data objects into line elements.
-     * 
+     *
      * @param {Object[]} lineData - Dynamically loaded lines.
      * @param {Object} line - Line data object.
      * @returns {Element[]} - Array of line elements.
@@ -167,7 +173,7 @@ class Termynal {
 
     /**
      * Helper function for generating attributes string.
-     * 
+     *
      * @param {Object} line - Line data object.
      * @returns {string} - String of attributes.
      */