diff --git a/README.md b/README.md index 670f778..01efc45 100644 --- a/README.md +++ b/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' diff --git a/index.js b/index.js index 7aa82f7..04573eb 100644 --- a/index.js +++ b/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,7 +26,7 @@ module.exports = function (opts) { content ]) - function getSelection () { + function onSelectHook () { var sel = [] each(content.children, function (page, i) { if(isVisible(page)) @@ -29,8 +34,8 @@ module.exports = function (opts) { }) 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 } - diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 0000000..c0bec8e --- /dev/null +++ b/package-lock.json @@ -0,0 +1,50 @@ +{ + "name": "hypertabs", + "version": "5.0.1", + "lockfileVersion": 1, + "requires": true, + "dependencies": { + "browser-split": { + "version": "0.0.0", + "resolved": "https://registry.npmjs.org/browser-split/-/browser-split-0.0.0.tgz", + "integrity": "sha1-QUGcrvdpdVkp3VGJZ9PuwKYmJ3E=" + }, + "class-list": { + "version": "0.1.1", + "resolved": "https://registry.npmjs.org/class-list/-/class-list-0.1.1.tgz", + "integrity": "sha1-m5dFGSxBebXaCg12M2WOPHDXlss=", + "requires": { + "indexof": "0.0.1" + } + }, + "html-element": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/html-element/-/html-element-1.3.0.tgz", + "integrity": "sha1-117LXa6HSx3mCgv4eUu9GYTQ8gk=", + "requires": { + "class-list": "0.1.1" + } + }, + "hyperscript": { + "version": "1.4.7", + "resolved": "https://registry.npmjs.org/hyperscript/-/hyperscript-1.4.7.tgz", + "integrity": "sha1-HyPYgPhDbKrCW5GnrDl0e4mnJhg=", + "requires": { + "browser-split": "0.0.0", + "class-list": "0.1.1", + "html-element": "1.3.0" + } + }, + "indexof": { + "version": "0.0.1", + "resolved": "https://registry.npmjs.org/indexof/-/indexof-0.0.1.tgz", + "integrity": "sha1-gtwzbSMrkGIXnQWrMpOmYFn9Q10=" + }, + "micro-css": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/micro-css/-/micro-css-1.0.0.tgz", + "integrity": "sha1-/7+beKMXOUmnVAC9ogaQUkMEKUo=", + "dev": true + } + } +} diff --git a/tabs.js b/tabs.js index 952a614..906a856 100644 --- a/tabs.js +++ b/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 } - - - -