Add animation

.gitignore

@@ -1,3 +1,5 @@
+index.html
+
 .bundle/
 _site/
 vendor/

src/animate.js

@@ -0,0 +1,58 @@
+function separate (text) {
+  let [res, checkBracket, start, classname, animation] = [[''], true, false, '', {}];
+  for (const line of text.split('\n')) {
+    // define animate
+    if (line.includes('@(animate:{')) {
+      const ani = line.substring(line.indexOf('{') + 1, line.indexOf('}'));
+      for (const item of ani.split(',')) {
+        animation[item.split(':')[0].trim()] = item.split(':')[1];
+      }
+      continue;
+    }
+
+    if (line.includes('(')) {
+      start = true;
+      if (start) {
+        if (checkBracket) {
+          res.push(line.replace('(',''))
+          checkBracket = false;
+        }
+        else res.push(line)
+      }
+    }
+    else if (line.includes(')@{')) {
+      classname = line.substring(line.indexOf('{') + 1, line.indexOf('}'))
+      if (start) {
+        checkBracket = true;
+        res.push(line.substr(0, line.indexOf(')@{')))
+      };
+      res.push('\n###');
+      start = false;
+    }
+    else {
+      if (start) res.push(line);
+    }
+
+  }
+
+  return [res.join('\n').split('###'), classname, animation];
+}
+
+// delay time during animation
+const delay = time => new Promise(res => setTimeout(res, time));
+
+async function animation (classname, ani) {
+  const {time, repeat} = ani;
+  do {
+    for (const svg of document.getElementsByClassName(classname)) {
+      if (svg.getAttribute('width') === '0') continue;
+      svg.style.display = 'block';
+      await delay(time);
+      svg.style.display = 'none';
+    }
+
+      document.querySelector(`.${classname}`).style.display = 'block';
+      // console.log(document.querySelector(`.${classname}`));
+      await delay(time);
+  } while (repeat === 'true');
+}

src/browser.js

@@ -7,11 +7,35 @@ document.addEventListener("DOMContentLoaded", function() {
       continue;
     }
     //setTimeout(() => {
-    const source = script.innerText;
-    const zoom = Number(script.getAttribute("zoom") || 0.3);
-    const debug = script.hasAttribute("grid");
-    const svg = create(source, zoom, debug);
-    script.parentNode.insertBefore(svg, script.nextSibling);
+      const source = script.innerText;
+      const zoom = Number(script.getAttribute("zoom") || 0.3);
+      const debug = script.hasAttribute("grid");
+
+      if (!source.includes(')@{')) {
+        // define there is no animation inside.
+        const svg = create(source, zoom, debug);      
+        script.parentNode.insertBefore(svg, script.nextSibling);
+        continue;
+      } 
+
+      // animation starts
+      const [newSources, classname, ani] = separate(source);
+      const {width, height} = ani;
+      const containSvg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+      containSvg.setAttribute("width", width);
+      containSvg.setAttribute("height", height);
+
+      for (const newSource of newSources) {
+        const svg = create(newSource, zoom, debug);
+        svg.classList.add(classname)
+        svg.style.display = 'none';
+        containSvg.appendChild(svg);
+      }
+
+      script.parentNode.insertBefore(containSvg, script.nextSibling);
+      //}, 0);
+
+      animation(classname, ani);
     //}, 0);
   }
 });