Commit cb96c21f9190d81e56e129d5b7def3e8300c8cbe
refactor tabs out
mix irving committed on 4/20/2017, 7:33:37 AMParent: 2eb2478a892562eec4fc89c6bb079c0f4be4c6a4
Files changed
| app/html/app.js | changed |
| app/html/tabs.js | added |
| message/html/layout/default.mcss | changed |
| app/html/app.js | ||
|---|---|---|
| @@ -1,6 +1,6 @@ | ||
| 1 … | +const nest = require('depnest') | |
| 1 | 2 … | const { h } = require('mutant') |
| 2 | -const nest = require('depnest') | |
| 3 | 3 … | const insertCss = require('insert-css') |
| 4 | 4 … | const Tabs = require('hypertabs') |
| 5 | 5 … | |
| 6 | 6 … | exports.gives = nest('app.html.app') |
| @@ -12,13 +12,13 @@ | ||
| 12 | 12 … | }, |
| 13 | 13 … | html: { |
| 14 | 14 … | error: 'first', |
| 15 | 15 … | externalConfirm: 'first', |
| 16 | - menu: 'first', | |
| 16 … | + tabs: 'first', | |
| 17 | 17 … | page: 'first', |
| 18 | - searchBar: 'first' | |
| 19 | 18 … | }, |
| 20 | 19 … | sync: { |
| 20 … | + addPage: 'first', | |
| 21 | 21 … | catchKeyboardShortcut: 'first' |
| 22 | 22 … | } |
| 23 | 23 … | }, |
| 24 | 24 … | 'styles.css': 'reduce' |
| @@ -30,41 +30,16 @@ | ||
| 30 | 30 … | function app () { |
| 31 | 31 … | const css = values(api.styles.css()).join('\n') |
| 32 | 32 … | insertCss(css) |
| 33 | 33 … | |
| 34 | - const handleSelection = (path, change) => { | |
| 35 | - if (tabs.has(path)) { | |
| 36 | - tabs.select(path) | |
| 37 | - return true | |
| 38 | - } | |
| 34 … | + const initialTabs = ['/public', '/private', '/notifications'] | |
| 35 … | + const tabs = api.app.html.tabs(initialTabs) | |
| 36 … | + const { addPage } = api.app.sync | |
| 39 | 37 … | |
| 40 | - addPage(path, true, false) | |
| 41 | - return change | |
| 42 | - } | |
| 43 | - const search = api.app.html.searchBar(handleSelection) | |
| 44 | - const menu = api.app.html.menu(handleSelection) | |
| 45 | - | |
| 46 | - const tabs = Tabs(onSelect, { append: h('div.navExtra', [ search, menu ]) }) | |
| 47 | - function onSelect (indexes) { | |
| 48 | - search.input.value = tabs.get(indexes[0]).content.id | |
| 49 | - } | |
| 50 | - | |
| 51 | 38 … | const App = h('App', tabs) |
| 52 | 39 … | |
| 53 | - function addPage (link, change, split) { | |
| 54 | - const page = api.app.html.page(link) | |
| 55 | - if (!page) return | |
| 56 | - | |
| 57 | - page.id = page.id || link | |
| 58 | - tabs.add(page, change, split) | |
| 59 | - } | |
| 60 | - | |
| 61 | - const initialTabs = ['/public', '/private', '/notifications'] | |
| 62 | - initialTabs.forEach(p => addPage(p)) | |
| 63 | - tabs.select(0) | |
| 64 | - | |
| 65 | 40 … | // Catch keyboard shortcuts |
| 66 | - api.app.sync.catchKeyboardShortcut(window, { tabs, search }) | |
| 41 … | + api.app.sync.catchKeyboardShortcut(window, { tabs }) | |
| 67 | 42 … | |
| 68 | 43 … | // Catch link clicks |
| 69 | 44 … | api.app.async.catchLinkClick(App, (link, { ctrlKey: openBackground, isExternal }) => { |
| 70 | 45 … | if (isExternal) return api.app.html.externalConfirm(link) |
| app/html/tabs.js | |||
|---|---|---|---|
| @@ -1,0 +1,74 @@ | |||
| 1 … | +const nest = require('depnest') | ||
| 2 … | +const { h } = require('mutant') | ||
| 3 … | +const Tabs = require('hypertabs') | ||
| 4 … | + | ||
| 5 … | +exports.gives = nest({ | ||
| 6 … | + app: { | ||
| 7 … | + 'html.tabs': true, | ||
| 8 … | + sync: { | ||
| 9 … | + 'goTo': true, | ||
| 10 … | + 'addPage': true | ||
| 11 … | + } | ||
| 12 … | + } | ||
| 13 … | +}) | ||
| 14 … | + | ||
| 15 … | +exports.needs = nest({ | ||
| 16 … | + 'app.html': { | ||
| 17 … | + menu: 'first', | ||
| 18 … | + page: 'first', | ||
| 19 … | + searchBar: 'first' | ||
| 20 … | + } | ||
| 21 … | +}) | ||
| 22 … | + | ||
| 23 … | +exports.create = function (api) { | ||
| 24 … | + | ||
| 25 … | + var _tabs | ||
| 26 … | + | ||
| 27 … | + function tabs (initialTabs = []) { | ||
| 28 … | + if (_tabs) return _tabs | ||
| 29 … | + | ||
| 30 … | + const search = api.app.html.searchBar(goTo) | ||
| 31 … | + const menu = api.app.html.menu(goTo) | ||
| 32 … | + const onSelect = (indexes) => { | ||
| 33 … | + search.input.value = _tabs.get(indexes[0]).content.id | ||
| 34 … | + } | ||
| 35 … | + _tabs = Tabs(onSelect, { | ||
| 36 … | + append: h('div.navExtra', [ search, menu ]) | ||
| 37 … | + }) | ||
| 38 … | + | ||
| 39 … | + initialTabs.forEach(p => addPage(p)) | ||
| 40 … | + _tabs.select(0) | ||
| 41 … | + return _tabs | ||
| 42 … | + } | ||
| 43 … | + | ||
| 44 … | + function goTo (path, change) { | ||
| 45 … | + tabs() | ||
| 46 … | + if (_tabs.has(path)) { | ||
| 47 … | + _tabs.select(path) | ||
| 48 … | + return true | ||
| 49 … | + } | ||
| 50 … | + | ||
| 51 … | + addPage(path, true, false) | ||
| 52 … | + return change | ||
| 53 … | + } | ||
| 54 … | + | ||
| 55 … | + function addPage (link, change, split) { | ||
| 56 … | + tabs() | ||
| 57 … | + const page = api.app.html.page(link) | ||
| 58 … | + if (!page) return | ||
| 59 … | + | ||
| 60 … | + page.id = page.id || link | ||
| 61 … | + _tabs.add(page, change, split) | ||
| 62 … | + } | ||
| 63 … | + | ||
| 64 … | + return nest({ | ||
| 65 … | + app: { | ||
| 66 … | + 'html.tabs': tabs, | ||
| 67 … | + sync: { | ||
| 68 … | + goTo, | ||
| 69 … | + addPage | ||
| 70 … | + } | ||
| 71 … | + } | ||
| 72 … | + }) | ||
| 73 … | +} | ||
| 74 … | + | ||
Built with git-ssb-web