git ssb

2+

mixmix / ticktack



Commit dffadefe5b79998c729e872521f3194d900a2167

Browse Files

drafts for blogNew

mix irving committed on 4/11/2018, 9:51:44 PM
Parent: 856796486d48c7b494769019a74b9b843471ee41

Files changed

app/page/blogNew.jschanged
main.jschanged
package-lock.jsonchanged
package.jsonchanged
translations/en.jschanged
app/page/blogNew.jsView
@@ -1,19 +1,25 @@
11 const nest = require('depnest')
2-const { h, Struct, Value, when } = require('mutant')
2+const { h, Struct, Value, when, resolve } = require('mutant')
33 const addSuggest = require('suggest-box')
44 const pull = require('pull-stream')
55 const marksum = require('markdown-summary')
66 const MediumEditor = require('medium-editor').MediumEditor
77 const MediumToMD = require('medium-editor-markdown')
8+const throttle = require('lodash/throttle')
89 // const CustomHtml = require('medium-editor-custom-async')
910
11+const DRAFT_LOCATION = 'TicktackBlogNew'
12+// NOTE - may want to have multiple drafts in future, this location would then become variable
13+
1014 exports.gives = nest('app.page.blogNew')
1115
1216 exports.needs = nest({
1317 'app.html.sideNav': 'first',
1418 'blob.html.input': 'first',
1519 'channel.async.suggest': 'first',
20+ 'drafts.sync.get': 'first',
21+ 'drafts.sync.set': 'first',
1622 'history.sync.push': 'first',
1723 'message.html.compose': 'first',
1824 'translations.sync.strings': 'first',
1925 'sbot.async.addBlob': 'first'
@@ -33,9 +39,30 @@
3339 summary: Value(),
3440 text: Value('')
3541 })
3642
37- const mediumComposer = h('Markdown.editor')
43+ const title = h('h1.input', {
44+ attributes: {
45+ contenteditable: true,
46+ 'data-placeholder': strings.blogNew.field.title
47+ },
48+ 'ev-input': updateTitle,
49+ className: when(meta.title, '', '-empty')
50+ })
51+ function updateTitle (e) {
52+ if (e.target.childElementCount) {
53+ // the title h1 is contenteditable, meaning people can paste html elements in here!
54+ // this is designed to strip down to heading content text
55+ // - I went with contenteditable because it handles wrapping of long titles,
56+ // whereas a styled input field just pushes content off the page!
57+ e.target.innerHTML = e.target.innerText
58+ }
59+ meta.title.set(e.target.innerText)
60+ }
61+
62+ var mediumComposer
63+ mediumComposer = h('Markdown.editor', {
64+ })
3865 var filesById = {}
3966 const composer = initialiseDummyComposer({ filesById, meta, api })
4067 // NOTE we are bootstrapping off the message.html.compose logic
4168 // - the mediumComposer feeds content into the composer, which the provides publishing
@@ -46,36 +73,17 @@
4673 'ev-input': e => meta.channel.set(e.target.value),
4774 value: meta.channel,
4875 placeholder: strings.channel
4976 })
50- const updateTitle = e => {
51- if (e.target.childElementCount) {
52- // the title h1 is contenteditable, meaning people can paste html elements in here!
53- // this is designed to strip down to heading content text
54- // - I went with contenteditable because it handles wrapping of long titles,
55- // whereas a styled input field just pushes content off the page!
56- e.target.innerHTML = e.target.innerText
57- }
58- meta.title.set(e.target.innerText)
59- }
6077
6178 var page = h('Page -blogNew', [
6279 api.app.html.sideNav(location),
6380 h('div.content', [
64- h('div.container', [
65- h('div.field -title', [
66- h('h1.input', {
67- attributes: {
68- contenteditable: true,
69- 'data-placeholder': strings.blogNew.field.title
70- },
71- 'ev-input': updateTitle,
72- className: when(meta.title, '', '-empty')
73- })
74- ]),
81+ h('div.container', { 'ev-input': throttledSaveDraft({ composer: mediumComposer, meta, api }) }, [
82+ h('div.field -title', title),
7583 mediumComposer,
7684 h('div.field -attachment',
77- AddFileButton({ api, filesById, meta, textArea: mediumComposer })
85+ AddFileButton({ api, filesById, meta, composer: mediumComposer })
7886 ),
7987 h('div.field -channel', [
8088 h('div.label', strings.channel),
8189 channelInput
@@ -91,19 +99,43 @@
9199 ])
92100 ])
93101 ])
94102
95- initialiseMedium({ page, el: mediumComposer, meta })
103+ initialiseMedium({ api, page, el: mediumComposer, meta })
96104 initialiseChannelSuggests({ input: channelInput, suggester: getChannelSuggestions, meta })
97105
106+ loadDrafts({ composer: mediumComposer, title, meta, api })
107+
98108 return page
99109 }
100110 }
101111
102-function AddFileButton ({ api, filesById, meta, textArea }) {
103- // var textRaw = meta.text
104- //
112+function loadDrafts ({ composer, title, meta, api }) {
113+ var draft = api.drafts.sync.get(DRAFT_LOCATION)
114+ if (!draft) return
105115
116+ if (draft.title) {
117+ meta.title.set(draft.title)
118+ title.innerText = draft.title
119+ }
120+
121+ if (draft.body) composer.innerHTML = draft.body
122+}
123+
124+function saveDraft ({ composer, meta, api }) {
125+ const hasBody = composer.innerText.split('\n').join('').replace(/\s/g, '').length > 0
126+
127+ const draft = {
128+ title: resolve(meta.title),
129+ body: hasBody ? composer.innerHTML : null
130+ }
131+ api.drafts.sync.set(DRAFT_LOCATION, draft)
132+}
133+function throttledSaveDraft ({ composer, meta, api }) {
134+ return throttle(() => saveDraft({ composer, meta, api }), 2000)
135+}
136+
137+function AddFileButton ({ api, filesById, meta, composer }) {
106138 const fileInput = api.blob.html.input(file => {
107139 filesById[file.link] = file
108140
109141 const isImage = file.type.match(/^image/)
@@ -118,29 +150,32 @@
118150 } else {
119151 content = h('a', { href: file.link }, file.name)
120152 }
121153 // TODO - insert where the mouse is yo
122- var editor = MediumEditor.getEditorFromElement(textArea)
123- textArea.insertBefore(
154+ var editor = MediumEditor.getEditorFromElement(composer)
155+ composer.insertBefore(
124156 h('p', content),
125157 editor.currentEl || null
126158 )
127159
160+ saveDraft({ composer, meta, api })
161+
128162 console.log('added:', file)
129163 })
130164
131165 return fileInput
132166 }
133167
134168 function initialiseDummyComposer ({ meta, api, filesById }) {
169+ const strings = api.translations.sync.strings()
170+
135171 return api.message.html.compose(
136172 {
137173 meta,
138- // placeholder: strings.blogNew.actions.writeBlog,
139174 shrink: false,
140175 canAttach: false,
141176 canPreview: false,
142- publishString: api.translations.sync.strings().publishBlog,
177+ publishString: strings.publishBlog,
143178 filesById,
144179 prepublish: function (content, cb) {
145180 var m = /\!\[[^]+\]\(([^\)]+)\)/.exec(marksum.image(content.text))
146181 content.thumbnail = m && m[1]
@@ -189,10 +224,16 @@
189224 meta.channel.set(e.detail.value)
190225 })
191226 }
192227
193-function initialiseMedium ({ page, el, meta }) {
228+function initialiseMedium ({ api, page, el, meta }) {
229+ const strings = api.translations.sync.strings()
230+ const draft = api.drafts.sync.get(DRAFT_LOCATION) || {}
231+
194232 var editor = new MediumEditor(el, {
233+ placeholder: {
234+ text: draft.body ? '' : strings.blogNew.actions.writeBlog
235+ },
195236 elementsContainer: page,
196237 // autoLink: true,
197238 buttonLabels: 'fontawesome',
198239 imageDragging: true,
main.jsView
@@ -33,8 +33,9 @@
3333 channel: require('./channel')
3434 },
3535 {
3636 profile: require('patch-profile'),
37+ drafts: require('patch-drafts'),
3738 history: require('patch-history'),
3839 core: require('patchcore')
3940 }
4041 )
package-lock.jsonView
The diff is too large to show. Use a local git client to view these changes.
Old file size: 238763 bytes
New file size: 239110 bytes
package.jsonView
@@ -41,8 +41,9 @@
4141 "morphdom": "^2.3.3",
4242 "mutant": "^3.21.2",
4343 "mutant-scroll": "0.0.5",
4444 "open-external": "^0.1.1",
45+ "patch-drafts": "0.0.6",
4546 "patch-history": "^1.0.0",
4647 "patch-profile": "^1.0.4",
4748 "patch-settings": "^1.0.0",
4849 "patch-suggest": "^1.1.0",
translations/en.jsView
@@ -30,9 +30,9 @@
3030 },
3131 actions: {
3232 edit: 'Edit',
3333 preview: 'Preview',
34- writeBlog: 'Write a blog'
34+ writeBlog: 'Write your blog here'
3535 }
3636 },
3737 channel: 'Channel',
3838 loading: 'Loading...',

Built with git-ssb-web