add ability to over-ride tab onClick

README.md

@@ -31,8 +31,9 @@ By default hypertabs assumes that the page size will be fixed and any scrolling
 
 Instantiates a tabs setup. `opts` is an optional _object_ which can contain any of the following keys:
 
-- `onSelect` - a callback function that is called when a tab is selected (called with ...)
-- `onClose` - a callback function that is called when a tab is closed (called with the page element being closed)
+- `onSelectHook` - a callback function that is called when a tab is selected (called with ...)
+- `onCloseHook` - a callback function that is called when a tab is closed (called with the page element being closed)
+- `onClick` - a callback function
 - `prepend` - an html element which is prepended before your tabs in the 'tab nav'
 - `append` - an html element which is appended after your tabs in the 'tab nav'
 

index.js

@@ -11,7 +11,12 @@ module.exports = function (opts) {
   if (!opts) opts = {}
 
   var content = h('section.content')
-  var tabs = Tabs(content, function () { getSelection() }, opts.onClose)
+  var tabs = Tabs(content, {
+    onClickLink: opts.onClickLink,
+    onClickClose: opts.onClickClose,
+    onSelectHook: onSelectHook,
+    onCloseHook: opts.onCloseHook
+  })
   var d = h('div.Hypertabs', [
     h('nav', [
       opts.prepend,
@@ -21,16 +26,16 @@ module.exports = function (opts) {
     content
   ])
 
-  function getSelection () {
+  function onSelectHook () {
     var sel = []
     each(content.children, function (page, i) {
       if(isVisible(page))
         sel.push(i)
     })
     if(''+sel === ''+selection) return
     d.selected = selection = sel
-    if(opts.onSelect) opts.onSelect(selection)
-    return sel
+
+    if(opts.onSelectHook) opts.onSelectHook(selection)
   }
 
   var selection = d.selected = []
@@ -43,7 +48,6 @@ module.exports = function (opts) {
     var index = content.children.length
     content.appendChild(page)
     if(change !== false && !split) d.select(index)
-    getSelection()
 
     return page
   }
@@ -83,22 +87,20 @@ module.exports = function (opts) {
       [].forEach.call(content.children, function (page, i) {
         i == index ? setVisible(page) : setInvisible(page)
       })
-    getSelection()
+    onSelectHook()
   }
 
   d.selectRelative = function (n) {
-    getSelection()
     d.select(selection[0] + n)
   }
 
   d.remove = function (i) {
     if(Array.isArray(i)) return i.reverse().forEach(d.remove)
     var el = d.get(i)
-    opts.onClose && opts.onClose(el.firstChild)
+    opts.onCloseHook && opts.onCloseHook(el.firstChild)
     if(el) content.removeChild(el)
   }
 
-  var _display
   d.fullscreen = function (full) {
     tabs.style.display = full ? 'none' : null
     return full
@@ -110,4 +112,3 @@ module.exports = function (opts) {
 
   return d
 }
-

tabs.js

@@ -1,18 +1,18 @@
 var h = require('hyperscript')
 var u = require('./lib/util')
-  each = u.each,
-  find = u.find,
-  isVisible = u.isVisible,
-  setVisible = u.setVisible,
-  setInvisible = u.setInvisible
+var each = u.each
+var find = u.find
+var isVisible = u.isVisible
+var setVisible = u.setVisible
+var setInvisible = u.setInvisible
 
-function toggle_focus(page) {
+function toggle_focus (page) {
   isVisible(page)
     ? blur(page)
     : focus(page)
 }
 
-function focus(page) {
+function focus (page) {
   if (isVisible(page)) return
 
   setVisible(page)
@@ -28,27 +28,35 @@ function blur (page) {
   el.dispatchEvent(new CustomEvent('blur', {target: el}))
 }
 
-function moveTo(page, content, i) {
+function moveTo (page, content, i) {
   if(!content.children.length || i >= content.children.length)
     content.appendChild(page)
   else
     content.insertBefore(page, content.children[i])
 }
 
-module.exports = function (content, onSelect, onClose) {
+module.exports = function (content, opts) {
+  opts = opts || {}
   var tabs = h('section.tabs')
-  var selection
 
   function build_tab (page) {
-    function close () {
+    function close (ev) {
+      ev.preventDefault()
+      ev.stopPropagation()
+
       page.parentNode.removeChild(page)
       tabs.removeChild(tab)
-      onClose && onClose(page.firstChild)
+      opts.onCloseHook && opts.onCloseHook(page.firstChild)
     }
 
     var link = h('a.link', {
       href: '#',
       onclick: function (ev) {
+        if (opts.onClickLink) {
+          opts.onClickLink(ev, page, content)
+          return
+        }
+
         ev.preventDefault()
         ev.stopPropagation()
 
@@ -59,23 +67,24 @@ module.exports = function (content, onSelect, onClose) {
             else blur(_page)
           })
         }
+        opts.onSelectHook && opts.onSelectHook()
       },
       onauxclick: function (ev) {
-        if(ev.which && ev.which === 2) {
-          ev.preventDefault()
-          ev.stopPropagation()
-          close()
-        }
+        if(ev.which && ev.which === 2) close(ev)
       }},
       getTitle(page)
     )
     var rm = h('a.close', {
       href: '#',
       onclick: function (ev) {
-        ev.preventDefault()
-        ev.stopPropagation()
-        close()
-      }},
+        if (opts.onClickClose) {
+          opts.onClickClose(ev, page, content)
+          return
+        }
+
+        close(ev)
+      }
+    },
       'x'
     )
 
@@ -104,7 +113,6 @@ module.exports = function (content, onSelect, onClose) {
       if(page.title !== link.innerText)
         link.innerText = getTitle(page)
       updateTabClasses()
-      onSelect && onSelect()
     }).observe(page, {attributes: true, attributeFilter: ['title', 'style', 'class']})
 
     updateTabClasses()
@@ -133,9 +141,6 @@ module.exports = function (content, onSelect, onClose) {
       }
     })
   }).observe(content, {childList: true})
+
   return tabs
 }
-
-
-
-