vanilla js, rm jquery

bookmarkManager.js

@@ -1,148 +1,152 @@
-
-function request(data)
-{
-    return $.ajax({
-        method: 'POST',
-        contentType: "application/json; charset=utf-8",
-        dataType: "json",
-        data: JSON.stringify(data)
+;(function() {
+  const contentEl = document.getElementById('content')
+  const formEl = document.getElementById('filterform')
+  const queryEl = document.getElementById('query')
+
+  async function request(data) {
+    const res = await fetch('', {
+      method: 'POST',
+      contentType: 'application/json; charset=utf-8',
+      body: JSON.stringify(data),
     })
-}
 
-function deleteEntry(id)
-{
-    request({ action: 'delete', id: id }).then(function(data) {
-        if (data.message) {
-            alert(data.message)
-        }
+    const text = await res.text()
+    return JSON.parse(text)
+  }
 
-        if (data.result === true) {
-            $('#entry_' + data.id).remove()
-        }
-    })
-}
+  async function deleteEntry(id) {
+    const res = await request({ action: 'delete', id })
 
-function setTitle(id, title)
-{
-    request({ action: 'settitle', id: id, title: title }).then(function(data) {
-        if (data.message) {
-            alert(data.message)
-        }
+    if (res.message) {
+      alert(res.message)
+    }
 
-        if (data.result === true) {
-            $('#entry_' + data.id + ' .title').html(data.title)
-            $('#entry_' + data.id).attr('data-title', data.rawTitle)
-            $('#entry_' + data.id + ' .tags').html(data.tags)
-        } else {
-            alert('err')
-        }
-    })
-}
+    if (res.result === true) {
+      document.getElementById(`entry_${res.id}`).remove()
+    }
+  }
 
-function setLink(id, link)
-{
-    request({ action: 'setlink', id: id, link: link }).then(function(data) {
-        if (data.message) {
-            alert(data.message)
-        }
+  async function setTitle(id, title) {
+    const res = await request({ action: 'settitle', id, title })
 
-        if (data.result === true) {
-            $('#entry_' + data.id + ' .link').html(data.link)
-            $('#entry_' + data.id + ' .link').attr('href', data.link)
-        } else {
-            alert('err')
-        }
-    })
-}
-
-function addUrl(url, force)
-{
-    var input = $(':input')
-
-    input.attr('disabled', 'disabled')
-
-    request({
-        action: 'add',
-        url: url,
-        force: force ? '1' : '0'
-    }).then(function(data) {
-        if (!data.force && data.message === 'could not fetch') {
-            if (confirm('could not fetch, add anyway?')) {
-                addUrl(data.url, true)
-                return
-            }
-
-            input.removeAttr('disabled')
-            input.focus()
-            return
-        }
+    if (res.message) {
+      alert(res.message)
+    }
 
-        if (data.message) {
-            alert(data.message)
-        }
+    if (res.result === true) {
+      const el = document.getElementById(`entry_${res.id}`)
+      el.querySelector('.title').innerHTML = res.title
+      el.setAttribute('data-title', res.rawTitle)
+      el.querySelector('.tags').innerHTML = res.tags
+    } else {
+      alert('err')
+    }
+  }
 
-        if (data.result === true) {
-            document.location.reload()
-        }
-
-        input.removeAttr('disabled')
-        input.focus()
-    })
-}
+  async function setLink(id, link) {
+    const res = await request({ action: 'setlink', id, link })
 
-$('.content').click(function(e) {
-    var target = e.target
+    if (res.message) {
+      alert(res.message)
+    }
 
-    if (target && target.className === 'title') {
-        var id = target.parentNode.getAttribute('data-id'),
-            rawTitle = target.parentNode.getAttribute('data-title'),
-            ret = prompt('Rename or enter "-" to delete', rawTitle)
+    if (res.result === true) {
+      const el = document.getElementById(`entry_${res.id}`)
+      const linkEl = el.querySelector('.link')
+      linkEl.innerHTML = res.link
+      linkEl.setAttribute('href', res.link)
+    } else {
+      alert('err')
+    }
+  }
 
-        if (!ret) {
-            return
-        }
+  async function addUrl(url, force) {
+    queryEl.setAttribute('disabled', 'disabled')
 
-        if (ret === '-') {
-            if (confirm('Really delete?')) {
-                deleteEntry(id)
-                return
-            } else {
-                return
-            }
-        }
+    const res = await request({
+      action: 'add',
+      url,
+      force: force ? '1' : '0',
+    })
+
+    if (!res.force && res.message === 'could not fetch') {
+      if (confirm('could not fetch, add anyway?')) {
+        addUrl(res.url, true)
+        return
+      }
 
-        setTitle(id, ret)
+      queryEl.removeAttribute('disabled')
+      queryEl.focus()
+      return
     }
-})
 
-$('.content').dblclick(function(e) {
-    var target = e.target
+    if (res.message) {
+      alert(res.message)
+    }
 
-    if (target && target.className === 'entry') {
-        var id = target.getAttribute('data-id')
+    if (res.result === true) {
+      document.location.reload()
+    }
 
-        var href = $('.link', target).attr('href')
+    queryEl.removeAttribute('disabled')
+    queryEl.focus()
+  }
 
-        var ret = prompt('Edit bookmark', href)
+  contentEl.addEventListener('click', e => {
+    const target = e.target
 
-        if (ret === null) {
-            return
+    if (target && target.className === 'title') {
+      const id = target.parentNode.getAttribute('data-id'),
+        rawTitle = target.parentNode.getAttribute('data-title'),
+        ret = prompt('Rename or enter "-" to delete', rawTitle)
+
+      if (!ret) {
+        return
+      }
+
+      if (ret === '-') {
+        if (confirm('Really delete?')) {
+          deleteEntry(id)
+          return
+        } else {
+          return
         }
+      }
 
-        setLink(id, ret)
+      setTitle(id, ret)
     }
-})
+  })
+
+  contentEl.addEventListener('dblclick', e => {
+    const target = e.target
+
+    if (target && target.className === 'entry') {
+      const id = target.getAttribute('data-id')
+      const href = target.querySelector('.link').getAttribute('href')
+      const ret = prompt('Edit bookmark', href)
+
+      if (ret === null) {
+        return
+      }
+
+      setLink(id, ret)
+    }
+  })
+
+  formEl.addEventListener('submit', e => {
+    const query = queryEl.value
 
-$('form').submit(function(e) {
-    var query = $(':input').val()
+    e.preventDefault()
 
     if (query.indexOf('http:') === 0 || query.indexOf('https:') === 0) {
-        addUrl(query)
-        return false
+      addUrl(query)
+      return false
     }
 
-    document.location.href = "?filter=" + encodeURIComponent(query)
+    document.location.href = '?filter=' + encodeURIComponent(query)
 
     return false
-})
+  })
+})()
 
+// vim: et ts=2 sw=2 sts=2

index.php

@@ -77,11 +77,11 @@
 
 <body>
 
-<div class="content">
+<div id="content">
 
 <div class="header">
-  <form>
-    <input autofocus type="text" name="query" value="" placeholder=""/>
+  <form id="filterform">
+    <input id="query" autofocus type="text" name="query" value="" placeholder=""/>
   </form>
 </div>
 
@@ -97,7 +97,6 @@
 
 </div>
 
-<script src="vendor/jquery-3.1.1.min.js"></script>
 <script src="bookmarkManager.js"></script>
 
 <?php if (!empty($_GET['add'])): ?>

style.css

@@ -23,7 +23,7 @@ a.link {
   color: #869DD4;
 }
 
-.content {
+#content {
   margin-left: auto;
   margin-right: auto;
   min-width: 800px;
@@ -76,7 +76,7 @@ input {
 
 @media (max-width: 800px) {
 
-  .content {
+  #content {
     min-width: 100%;
     max-width: 100%;
   }