From 108abc0637b2ebb7f7dea1d3559c53edc07dd795 Mon Sep 17 00:00:00 2001 From: mix irving Date: Sat, 10 Mar 2018 15:35:41 +1300 Subject: [PATCH 1/3] add ability to over-ride tab onClick --- index.js | 6 +++++- tabs.js | 22 ++++++++++++++-------- 2 files changed, 19 insertions(+), 9 deletions(-) diff --git a/index.js b/index.js index 7aa82f7..7b81c82 100644 --- a/index.js +++ b/index.js @@ -11,7 +11,11 @@ module.exports = function (opts) { if (!opts) opts = {} var content = h('section.content') - var tabs = Tabs(content, function () { getSelection() }, opts.onClose) + var tabs = Tabs(content, { + onClick: opts.onClick, + onSelect: function () { getSelection() }, + onClose: opts.onClose + }) var d = h('div.Hypertabs', [ h('nav', [ opts.prepend, diff --git a/tabs.js b/tabs.js index 952a614..3ab79d3 100644 --- a/tabs.js +++ b/tabs.js @@ -1,10 +1,10 @@ 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) { isVisible(page) @@ -35,7 +35,8 @@ function moveTo(page, content, i) { 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 @@ -43,12 +44,17 @@ module.exports = function (content, onSelect, onClose) { function close () { page.parentNode.removeChild(page) tabs.removeChild(tab) - onClose && onClose(page.firstChild) + opts.onClose && opts.onClose(page.firstChild) } var link = h('a.link', { href: '#', onclick: function (ev) { + if (opts.onClick) { + opts.onClick(ev, page) + return + } + ev.preventDefault() ev.stopPropagation() @@ -104,7 +110,7 @@ module.exports = function (content, onSelect, onClose) { if(page.title !== link.innerText) link.innerText = getTitle(page) updateTabClasses() - onSelect && onSelect() + opts.onSelect && opts.onSelect() }).observe(page, {attributes: true, attributeFilter: ['title', 'style', 'class']}) updateTabClasses() From 77d678b598e65ecbdf526bebd283506fb21b1b8a Mon Sep 17 00:00:00 2001 From: mix irving Date: Sun, 11 Mar 2018 22:10:00 +1300 Subject: [PATCH 2/3] rename onClick to onClickOverride --- index.js | 2 +- tabs.js | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/index.js b/index.js index 7b81c82..a69952c 100644 --- a/index.js +++ b/index.js @@ -12,7 +12,7 @@ module.exports = function (opts) { var content = h('section.content') var tabs = Tabs(content, { - onClick: opts.onClick, + onClickOverride: opts.onClickOverride, onSelect: function () { getSelection() }, onClose: opts.onClose }) diff --git a/tabs.js b/tabs.js index 3ab79d3..c6e25ca 100644 --- a/tabs.js +++ b/tabs.js @@ -50,8 +50,8 @@ module.exports = function (content, opts) { var link = h('a.link', { href: '#', onclick: function (ev) { - if (opts.onClick) { - opts.onClick(ev, page) + if (opts.onClickOverride) { + opts.onClickOverride(ev, page) return } From 056b541b3bf78942bf58e8f47e6e550f84f94b78 Mon Sep 17 00:00:00 2001 From: mix irving Date: Sun, 11 Mar 2018 23:25:25 +1300 Subject: [PATCH 3/3] rename to Hooks and onClick --- README.md | 5 +++-- index.js | 21 +++++++++----------- package-lock.json | 50 +++++++++++++++++++++++++++++++++++++++++++++++ tabs.js | 43 ++++++++++++++++++++-------------------- 4 files changed, 83 insertions(+), 36 deletions(-) create mode 100644 package-lock.json 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 a69952c..04573eb 100644 --- a/index.js +++ b/index.js @@ -12,9 +12,10 @@ module.exports = function (opts) { var content = h('section.content') var tabs = Tabs(content, { - onClickOverride: opts.onClickOverride, - onSelect: function () { getSelection() }, - onClose: opts.onClose + onClickLink: opts.onClickLink, + onClickClose: opts.onClickClose, + onSelectHook: onSelectHook, + onCloseHook: opts.onCloseHook }) var d = h('div.Hypertabs', [ h('nav', [ @@ -25,7 +26,7 @@ module.exports = function (opts) { content ]) - function getSelection () { + function onSelectHook () { var sel = [] each(content.children, function (page, i) { if(isVisible(page)) @@ -33,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 = [] @@ -47,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 } @@ -87,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 @@ -114,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 c6e25ca..906a856 100644 --- a/tabs.js +++ b/tabs.js @@ -6,13 +6,13 @@ 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,7 +28,7 @@ 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 @@ -38,20 +38,22 @@ function moveTo(page, content, i) { 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) - opts.onClose && opts.onClose(page.firstChild) + opts.onCloseHook && opts.onCloseHook(page.firstChild) } var link = h('a.link', { href: '#', onclick: function (ev) { - if (opts.onClickOverride) { - opts.onClickOverride(ev, page) + if (opts.onClickLink) { + opts.onClickLink(ev, page, content) return } @@ -65,23 +67,24 @@ module.exports = function (content, opts) { 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' ) @@ -110,7 +113,6 @@ module.exports = function (content, opts) { if(page.title !== link.innerText) link.innerText = getTitle(page) updateTabClasses() - opts.onSelect && opts.onSelect() }).observe(page, {attributes: true, attributeFilter: ['title', 'style', 'class']}) updateTabClasses() @@ -139,9 +141,6 @@ module.exports = function (content, opts) { } }) }).observe(content, {childList: true}) + return tabs } - - - -