Merge pull request #3 from mtsgi/feature/writedown

Feature/writedown
mtsgi · Jun 28, 2020 · e44bf64 · e44bf64
2 parents 72c6ae9 + e2f184d
commit e44bf64
Show file tree

Hide file tree

Showing 4 changed files with 110 additions and 9 deletions.
diff --git a/README.md b/README.md
@@ -32,14 +32,7 @@ Writing html will be more fun!
 </body>
 ```
 
-```
-   |||||
-   ;;;;;
-   ;;;;;
- ..;;;;;..
-  ':::::'
-    ':'
-```
+↓
 
 ```html
 <body id="root">
@@ -55,3 +48,22 @@ Writing html will be more fun!
   </button>
 </body>
 ```
+
+## Usage
+
+There are two ways to initialize Writedown.
+
+```html
+<script src="https://cdn.jsdelivr.net/gh/mtsgi/writedown@master/writedown.js"></script>
+```
+
+or
+
+```html
+<script type="module">
+  import * as wd from "../wd.js";
+  wd.init('.wd');
+  // You can init Writedown for the specific element in this way
+  // This also works: wd.init(document.querySelector('.wd'))
+</script>
+```
diff --git a/docs/sample.html b/docs/sample.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="shortcut icon" href="../logomark.png" type="image/x-icon">
+  <title>Writedown</title>
+  <style>
+    body {
+      margin: 0;
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+      -webkit-font-smoothing: antialiased;
+      -moz-osx-font-smoothing: grayscale;
+      box-sizing: border-box;
+      color: #444444;
+      font-size: 20px;
+      text-align: center
+    }
+
+    .paragraph {
+      background: #f0f0f0;
+      padding: 12px;
+    }
+
+    #mylist::before {
+      content: "This is MYLIST!"
+    }
+
+    .list-item {
+      border-bottom: 2px solid #d0d0d0;
+      padding: 8px 0;
+    }
+
+    .list-item.red {
+      color: crimson;
+    }
+  </style>
+</head>
+
+<body>
+  <h2>Outside</h2>
+  <div class="nope">
+    <p .paragraph>Hello!</p>
+    <ul #mylist>
+      <li .list-item>KIT</li>
+      <li .list-item.red>KIT</li>
+    </ul>
+  </div>
+
+  <h2>Inside</h2>
+  <div class="wd">
+    <p .paragraph>Hello!</p>
+    <ul #mylist>
+      <li .list-item>KIT</li>
+      <li .list-item.red>KIT</li>
+    </ul>
+  </div>
+  <script type="module">
+    import * as wd from "../wd.js";
+    // wd.init(document.querySelector('.wd'));
+    wd.init('.wd');
+  </script>
+</body>
+
+</html>
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "wdjs",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "writing html will be more fun!",
   "main": "writedown.js",
   "scripts": {

diff --git a/wd.js b/wd.js
@@ -0,0 +1,23 @@
+export function init(param) {
+  const el = param instanceof HTMLElement ? param : document.querySelector(param);
+  el.querySelectorAll('*').forEach(node => {
+    if (node.hasAttributes()) {
+      let attrs = [], classes = [], id = null;
+      for (const attr of node.attributes) {
+        switch (attr.name[0]) {
+          case '.':
+            classes.push(...attr.name.substring(1).split('.'));
+            attrs.push(attr.name);
+            break;
+          case '#':
+            id = attr.name.substring(1);
+            attrs.push(attr.name);
+            break;
+        }
+      }
+      for (const a of attrs) { node.removeAttribute(a) }
+      if (classes.length) node.classList.add(...classes);
+      if (id) node.id = id;
+    }
+  });
+}