21 |
When interfaces are designed for capturing and exhausting your attention going offline is both an act of liberation and luxury. This is a tool of ethical technology enabling you to save pages for offline access and personal archival.
22 |
The project requires Beaker Browser and it's experimental web api to function. Good news; it's really easy to start, and once downloaded you can begin browsing and publishing to the rest of the p2p web, too.
23 |
24 | - Download and install Beaker Browser.
25 | - Navigate to the Dat archive url.
26 | - If you'd like to create your own, click Fork inside Beaker. Feel free to customize as the entire source is included.
27 |
28 |
For more, visit the repository or the log entry.
29 |
16 | ${elPanelSave()}
17 | ${state.dropout.dat.isOwner
18 | ? elSavePage()
19 | : state.dropout.config.forkable ? elFork() : ''
20 | }
21 | ${state.dropout.loaded
22 | ? pages({ pages: getPages() })
23 | : ''
24 | }
25 |
26 | `
27 |
28 | function getPages () {
29 | return objectKeys(state.dropout.library)
30 | .map(function (key) {
31 | var output = state.dropout.library[key]
32 | output.basename = output.basename || key
33 | output.dateformat = state.dropout.config.dateformat
34 | return output
35 | })
36 | .sort(function (a, b) {
37 | return b.date - a.date
38 | })
39 | }
40 |
41 | function elPanelSave () {
42 | return html`
43 |
47 | ${panelSave({
48 | saving: state.dropout.saving,
49 | oninput: oninput,
50 | onsubmit: onsubmit,
51 | value: state.ui.add.value
52 | })}
53 |
54 | `
55 |
56 | function oninput (data) {
57 | emit(state.events.UI_ADD, { value: data })
58 | }
59 |
60 | function onsubmit () {
61 | emit(state.events.DROPOUT_SAVEPAGE, {
62 | url: state.ui.add.value,
63 | callback: onsuccess,
64 | render: false
65 | })
66 | }
67 |
68 | function onsuccess () {
69 | emit(state.events.UI_ADD, { active: false, value: '' })
70 | setTimeout (function () {
71 | emit(state.events.UI_ADD, { value: '' })
72 | }, 500)
73 | }
74 |
75 | function handleContainerClick (event) {
76 | focusInput(event)
77 | }
78 | }
79 |
80 | function elSavePage() {
81 | return buttonSave({
82 | active: state.ui.add.active,
83 | onclick: function (event) {
84 | emit(state.events.UI_ADD, { active: !state.ui.add.active })
85 | emit(state.events.RENDER)
86 | if (!state.ui.add.active) {
87 | setTimeout(function () {
88 | emit(state.events.UI_ADD, { value: '' })
89 | }, 500)
90 | } else {
91 | setTimeout(focusInput, 0)
92 | }
93 | }
94 | })
95 | }
96 |
97 | function elFork () {
98 | return buttonFork({
99 | active: false,
100 | onclick: function () {
101 | emit(state.events.DROPOUT_FORK)
102 | }
103 | })
104 | }
105 |
106 | function focusInput (event) {
107 | if (!state.ui.add.active) return
108 | var el = document.querySelector('input')
109 | if (el) el.focus()
110 | }
111 | }
112 |
113 | function pages (props) {
114 | if (props.pages.length) {
115 | return html`
116 |
25 | ${titlebar.render({
26 | page: page,
27 | handleDelete: handleDelete
28 | })}
29 |
30 | ${raw(page.content)}
31 |
32 |