Annotation.elmis built around an
Annotationtype and has a way to create, encode, and view annotations.
Annotationcan be editable or not. If an annotation is editable, it has a
NotEditingannotation can be created directly. An
Editableannotation must be created from a
Valuethat will come over a port.
encodefor storing annotations and
encodeTitlefor loading them.
viewfunction with a case for
annotationwhen we navigate to a new page or load an annotation.
updatewill handle four messages that initialize, load, or store annotations.
OnPageChangesets the annotation to
NotEditingwhen a user navigates to a new page.
LoadAnnotationcalls over a port to load an annotation.
UpdateAnnotationupdates the displayed annotation in the input box and stores the annotation.
GotAnnotatationsubscribes to annotations that come in over a port after a load.
mainfunction needs a small change to configure the
OnPageChangemessage. Set the
onPageChangefield in the record passed to
GotAnnotationto update our model with it.
viewdisplays the annotation at the bottom right corner and in front of the rest of the page. We check if the user is logged in and viewing a blog post. If both are true, we show them the annotation.
webnativepackage from npm.
webnativewith a list of permissions stating what our app would like to use. In our case, we only need to request permission to use the storage associated with our app.
fsvariable that will be used to access the user's filesystem. Add
fissionInitwith a request for
permissionsto use app storage by app name and your Fission username.
<username>with your Fission username.
webnative. In the
Continuationcases, the user has authenticated and granted permission to use the filesystem. We can now set up the filesystem and a way to load and store annotations.
annotationssubdirectory as JSON. Each annotation is stored as a file using the blog post title and a
.jsonsuffix. For example, an annotation on the blog post "Hello Galaxy 🌠" would be stored on the path
annotations/Hello Galaxy 🌠.json. Paths are case sensitive, spaces are fine, and emoji are welcomed!
fs.appPathwhich takes an array of strings that are parts of a path separated by forward slashes.
fsto put it onto the global scope.
fs.mkdir. Each time we make a change to the local filesystem, we
fs.publishto synchronize with the distributed filesystem.
loadAnnotationport, we make check if a file for the annotation exists. If it does, we
fs.readand send it over the
onFissionAuthport into the Elm app. If not, we send an empty annotation value.
webnativesaves the annotation to the filesystem with
fs.write. The current implementation uses a transaction queue to handle writes that come in quick succession. See the transaction queue implementation to examine how this works now. An upcoming version of
webnativewill handle writes in parallel, and the transaction queue will not be needed.