Merge pull request #5 from github/events

Update event name and docs

Author: muan

README.md

@@ -45,12 +45,12 @@ import '@github/task-lists-element'
 ```js
 const list = document.querySelector('task-lists')
 
-list.addEventListener('task-lists:check', function(event) {
+list.addEventListener('task-lists-check', function(event) {
   const {position, checked} = event.detail
   console.log(position, checked)
 })
 
-list.addEventListener('task-lists:move', function(event) {
+list.addEventListener('task-lists-move', function(event) {
   const {src, dst} = event.detail
   console.log(src, dst)
 })

examples/index.html

@@ -62,12 +62,12 @@
   <pre class="events"></pre>
   <script type="text/javascript">
     const events = document.querySelector('.events')
-    document.addEventListener('task-lists:check', function(event) {
-      events.append(`task-lists:check - checked: ${event.detail.checked}, position: ${event.detail.position}\n`)
+    document.addEventListener('task-lists-check', function(event) {
+      events.append(`task-lists-check - checked: ${event.detail.checked}, position: ${event.detail.position}\n`)
     })
 
-    document.addEventListener('task-lists:move', function(event) {
-      events.append(`task-lists:move - from: ${event.detail.src}, to: ${event.detail.dst}\n`)
+    document.addEventListener('task-lists-move', function(event) {
+      events.append(`task-lists-move - from: ${event.detail.src}, to: ${event.detail.dst}\n`)
     })
   </script>
 </body>

src/task-lists-element.js

@@ -14,7 +14,7 @@ export default class TaskListsElement extends HTMLElement {
       if (!checkbox.classList.contains('task-list-item-checkbox')) return
 
       this.dispatchEvent(
-        new CustomEvent('task-lists:check', {
+        new CustomEvent('task-lists-check', {
           bubbles: true,
           detail: {
             position: position(checkbox),
@@ -207,7 +207,7 @@ function onSorted({src, dst}) {
   originalLists.delete(container)
 
   container.dispatchEvent(
-    new CustomEvent('task-lists:move', {
+    new CustomEvent('task-lists-move', {
       bubbles: true,
       detail: {
         src: [lists.indexOf(src.list), src.index],

test/test.js

@@ -69,7 +69,7 @@ describe('task-lists element', function() {
       let called = false
 
       const list = document.querySelector('task-lists')
-      list.addEventListener('task-lists:check', function(event) {
+      list.addEventListener('task-lists-check', function(event) {
         called = true
         const {position, checked} = event.detail
         assert.deepEqual(position, [1, 1])
@@ -87,7 +87,7 @@ describe('task-lists element', function() {
       let called = false
 
       const list = document.querySelector('task-lists')
-      list.addEventListener('task-lists:check', function(event) {
+      list.addEventListener('task-lists-check', function(event) {
         called = true
         const {position, checked} = event.detail
         assert.deepEqual(position, [4, 0])