Merge pull request #23 from benjifs/feat/photo-and-options

Feat: Add photo post editor

package.json

@@ -1,6 +1,6 @@
 {
   "name": "sparkles",
-  "version": "0.7.1",
+  "version": "0.8.0",
   "description": "micropub client",
   "main": "./src/js/app.js",
   "scripts": {
@@ -28,8 +28,8 @@
     "url": "https://github.com/benjifs/sparkles/issues"
   },
   "devDependencies": {
-    "eslint": "^8.55.0",
-    "sass": "^1.69.5",
+    "eslint": "^8.56.0",
+    "sass": "^1.69.7",
     "vite": "^4.5.0"
   },
   "dependencies": {

public/manifest.json

@@ -64,10 +64,10 @@
       "icons": [{ "src": "/assets/note-192.png", "sizes": "192x192" }]
     },
     {
-      "name": "New image",
-      "short_name": "image",
-      "description": "Upload a new image",
-      "url": "/new/image",
+      "name": "New photo",
+      "short_name": "photo",
+      "description": "Add a new photo",
+      "url": "/new/photo",
       "icons": [{ "src": "/assets/image-192.png", "sizes": "192x192" }]
     }
   ],

src/functions/lib/utils.js

@@ -20,7 +20,7 @@ const Error = {
 
 const Response = {
 	DEFAULT_HEADERS: {
-		'Access-Control-Allow-Origin': '*',
+		// 'Access-Control-Allow-Origin': '*',
 		'Access-Control-Allow-Headers': 'Content-Type, authorization',
 		'Access-Control-Expose-Headers': 'Location'
 	},

src/js/Components/Gallery.js

@@ -42,7 +42,8 @@ const Gallery = () => {
 					:
 					m('i.fas.fa-rotate-right')),
 				m('.sp-gallery', [
-					images.slice(0, (page + 1) * PAGE_SIZE).map(i => m('img', { src: i.url }))
+					images.slice(0, (page + 1) * PAGE_SIZE).map(i =>
+						m(m.route.Link, { class: 'icon', href: `/new/photo?image=${i.url}` }, m('img', { src: i.url })))
 				]),
 				images.length > (page + 1) * PAGE_SIZE && m('button', { type: 'button', onclick: () => page++ }, 'load more')
 			]

src/js/Components/Tile.js

@@ -4,12 +4,12 @@ const Tile = {
 	view: ({ attrs }) =>
 		m(m.route.Link, {
 			href: attrs.href,
-			selector: 'button.sp-block',
+			selector: 'button',
 			disabled: attrs.disabled || false
 		}, [
 			m('div', [
 				m(`i.${attrs.icon}`, { 'aria-hidden': 'true' }),
-				m('.sp-block-title', attrs.name)
+				m('div', attrs.name)
 			])
 		])
 }

src/js/Editors/EntryPreview.js

@@ -0,0 +1,12 @@
+import m from 'mithril'
+
+import { Modal } from '../Components/Modal'
+
+const EntryPreview = {
+	view: ({ attrs: { buildPreview } }) =>
+		buildPreview && m('div.text-center', m('a', {
+			onclick: () => Modal(m('pre', JSON.stringify(buildPreview(), null, 4)))
+		}, 'preview'))
+}
+
+export default EntryPreview

src/js/Editors/ImageEditor.js

@@ -87,7 +87,7 @@ const ImageEditor = () => {
 						m('div', m('a', { href: uploaded, target: '_blank' }, uploaded)),
 						m('div', [
 							m(m.route.Link, {
-								href: `/new/note?image=${uploaded}`,
+								href: `/new/photo?image=${uploaded}`,
 								selector: 'button'
 							}, 'post image')
 						])

src/js/Editors/MediaEditor.js

@@ -2,7 +2,8 @@ import m from 'mithril'
 
 import Alert from '../Components/Alert'
 import { Box } from '../Components/Box'
-import { Modal } from '../Components/Modal'
+import EntryPreview from './EntryPreview'
+import SyndicateToOptions from './SyndicateToOptions'
 import Rating from '../Components/Rating'
 import Proxy from '../Controllers/Proxy'
 import Store from '../Models/Store'
@@ -28,9 +29,13 @@ const parseQuery = string => {
 
 const MediaEditor = ({ attrs }) => {
 	const postTypes = Store.getSession('post-types') || []
+	const syndicateTo = Store.getSession('syndicate-to') || []
 
 	let state = {
 		type: attrs.search?.options?.[0] || null,
+		'mp-syndicate-to': syndicateTo
+			.filter(element => element.checked)
+			.map(element => element.uid),
 		progress: 'finished'
 	}
 
@@ -77,7 +82,8 @@ const MediaEditor = ({ attrs }) => {
 					...(state.content && { content: [ state.content ] }),
 					...(rating && state.rating > 0 && { rating: [ state.rating ] }),
 					...(rewatched && { rewatch: [ state.rewatched === true ] })
-				})
+				}),
+				...(state['mp-syndicate-to'] && { 'mp-syndicate-to': state['mp-syndicate-to'] })
 			}
 		}
 	}
@@ -244,13 +250,18 @@ const MediaEditor = ({ attrs }) => {
 							value: state.content || ''
 						}),
 					],
+					m('details',
+						m('summary', 'Advanced'),
+						m(SyndicateToOptions, {
+							syndicateTo: syndicateTo,
+							onchange: (key, val) => state[key] = val
+						})
+					),
 					m('div.text-center', m('button', {
 						type: 'submit',
 						disabled: state.submitting
 					}, state.submitting ? m('i.fas.fa-spinner.fa-spin', { 'aria-hidden': 'true' }) : 'Post')),
-					m('div.text-center', m('a', {
-						onclick: () => Modal(m('pre', JSON.stringify(buildEntry(), null, 4)))
-					}, 'preview'))
+					m(EntryPreview, { buildPreview: buildEntry })
 				])
 			])
 	}

src/js/Editors/SyndicateToOptions.js

@@ -0,0 +1,29 @@
+import m from 'mithril'
+
+const SyndicateToOptions = {
+	view: ({ attrs: { syndicateTo, onchange } }) =>
+		syndicateTo && syndicateTo.length > 0 && [
+			m('h5', 'Syndication Targets'),
+			m('ul', [
+				syndicateTo.map(s =>
+					m('li', [
+						m('label', [
+							s.name,
+							m('input.mp-syndicate-to', {
+								type: 'checkbox',
+								checked: s.checked,
+								value: s.uid,
+								onchange: e => {
+									s.checked = e.target.checked
+									onchange && onchange('mp-syndicate-to', syndicateTo
+										.filter(element => element.checked)
+										.map(element => element.uid))
+								}
+							})
+						])
+					]))
+			])
+		]
+}
+
+export default SyndicateToOptions

src/js/Editors/Tiles.js

@@ -36,11 +36,11 @@ const ReplyTile = {
 		})
 }
 
-const ImageTile = {
+const PhotoTile = {
 	view: () => m(Tile, {
-		href: '/new/image',
+		href: '/new/photo',
 		icon: '.far.fa-image',
-		name: 'Image'
+		name: 'Photo'
 	})
 }
 
@@ -104,7 +104,7 @@ const GameTile = {
 
 const PostTypes = {
 	note: NoteTile,
-	image: ImageTile,
+	photo: PhotoTile,
 	reply: ReplyTile,
 	bookmark: BookmarkTile,
 	like: LikeTile,
@@ -118,7 +118,7 @@ const PostTypes = {
 
 const Tiles = (types, defaultTiles, params) => {
 	if (!defaultTiles || !defaultTiles.length) {
-		defaultTiles = [ 'note', 'image', 'reply', 'bookmark', 'like', 'article', 'rsvp', 'watch', 'read', 'listen', 'game' ]
+		defaultTiles = [ 'note', 'photo', 'reply', 'bookmark', 'like', 'article', 'rsvp', 'watch', 'read', 'listen', 'game' ]
 	}
 	if (!types || !types.length) {
 		types = defaultTiles.map(t => ({ type: t }))