30:T5c4,md`# Globally Synchronized Views

When collaborating it is sometimes desirable that everyone sees exactly the same thing. This notebook adds a \`share(key, view)\` which will globally synchronize the view (and remember it between sessions). The view argument must conform to [best practices](https://observablehq.com/@tomlarkworthy/ui-linter), such as [@observablehq/inputs](https://observablehq.com/@observablehq/inputs) or a native input. In particular, it needs to be a writable *viewof*. The result of a _share_ call is a link to a [REST API](https://firebase.google.com/docs/reference/rest/database), so you can even manipulate the control outside of a notebook. ~~~js import {share} from '${await getCurrentPinnedName()}' ~~~ To use: ~~~js share("uniqueKey", viewof range) ~~~ There is a unique keyspace for each notebook URL, so forks will have their own settings. Thanks [@enjalot](https://observablehq.com/@enjalot) for coming up with the idea and sparring solutions. shareview uses isTrusted to detect whether a change was by a user or not, which avoids self triggering loops when syncronizing with the server. However, sometimes a component has to raise events manually and it is not possible to set isTrusted on the raised events. So for synthetic events you wish to be serialized,sSet _isUser_ to true inside the "details" object of a CustomEvent object. `31:T4b2,async function share( key, // Key is notebook scoped storage location to use (typically unique within a notebook) view // View is a viewof component like Range. Should be writable ) { if (typeof key !== 'string') throw new Error("First arg of share, 'key', must be a string"); if (view.value === undefined) throw new Error("Sencond arg of share, 'view', must be a viewof"); const dbRef = db.ref( `/shareinput/${FKEY.encode( html``.href.split('?')[0] )}/${FKEY.encode(key)}` ); const inputListener = e => { // update the value in firebase only if the user triggered it via user interaction if (e.isTrusted || e.isUser) dbRef.set(view.value); }; const dbListener = snapshot => { const val = snapshot.val(); if (val) { // val can be null when first used view.value = val; view.dispatchEvent(new Event('input')); } }; view.addEventListener("input", inputListener); dbRef.on('value', dbListener); invalidation.then(() => { view.removeEventListener("input", inputListener); dbRef.off('value', dbListener); }); return html`${key}`; }32:[{"id":"9a603de881b78682cdfebb78bb136dc135bdaa644a12b6c4b0e3e26a817be594caed1d3e8782e45ecef3ebc22c4aa28cbae376e521861dee4e7d8efc084b9b3c","href":"https://static.observableusercontent.com/files/9a603de881b78682cdfebb78bb136dc135bdaa644a12b6c4b0e3e26a817be594caed1d3e8782e45ecef3ebc22c4aa28cbae376e521861dee4e7d8efc084b9b3c","name":"shareview.png","type":"image/png","lastModified":1620918984689.041,"size":80434},{"id":"9d3aeba4ffeff06ff85193b1c170e502cecc3893d74d927b7cce37ef8d010b31957548c007efd06c0faca36602616a6f2d5398604973b8a49cb0d061b5a8fa47","href":"https://static.observableusercontent.com/files/9d3aeba4ffeff06ff85193b1c170e502cecc3893d74d927b7cce37ef8d010b31957548c007efd06c0faca36602616a6f2d5398604973b8a49cb0d061b5a8fa47","name":"image.png","type":"image/png","lastModified":1620913215706.621,"size":38557},{"id":"bb324933a00e36ccd8329fe55af613f0d91b42016d24eb5fb31b663123d2a50ef88eea19d48e0ede792812ec1b3cfe732cbd657b15559b0e43c27d68a1b4696c","href":"https://static.observableusercontent.com/files/bb324933a00e36ccd8329fe55af613f0d91b42016d24eb5fb31b663123d2a50ef88eea19d48e0ede792812ec1b3cfe732cbd657b15559b0e43c27d68a1b4696c","name":"shareinput.png","type":"image/png","lastModified":1620916468855.051,"size":77333}] 2e:{"title":"Globally Synchronized Views","cells":[{"id":0,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":166,"value":"md`## Demo\n\nOpen this notebook twice\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"viewof range = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"share(\"range\", viewof range)","pinned":true,"hidden":false,"mode":"ojs"},{"id":65,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":168,"value":"signature(share, {\n description:\n \"Synchronizes an *viewof* to a notebook scoped *key*. Returns a link to a RESTful resource URL, which you can also GET and PUT\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":68,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":194,"value":"md`---\n\n### Synchronized inputs\n\nIf you map two controls to a single key then you get [synchronized input](https://observablehq.com/@observablehq/synchronized-inputs) behavior.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":197,"value":"viewof differentRange = html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":199,"value":"share(\"range\", viewof differentRange)","pinned":true,"hidden":false,"mode":"ojs"},{"id":212,"value":"md`### Generalized JSON syncing\n\nSo even complex UIs, as long as they follow [best practices](https://observablehq.com/@tomlarkworthy/ui-linter) they should work.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":227,"value":"viewof sliders = verticalSliders({\n names: 'shareinput'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":232,"value":"share(\"sliders\", viewof sliders)","pinned":true,"hidden":false,"mode":"ojs"},{"id":224,"value":"import { verticalSliders } from '@tomlarkworthy/vertical-sliders'","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":49,"value":"md`### Realtime Database\n\nWe use Firebase realtime database as it has the lowest latency. Its an unpaid account so you cannot possibly bankrupt me, and I am happpy to share this one. BUT, the possibility exists of a non-community minded individual exhausts the credit. In this case, you are able to bring-your-own firebase by overriding FIREBASE_CONFIG, and you can even clientside secure your instance with security rules and a login if you wish.\n\nThe current rules are:\n\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":39,"value":"db = firebase.database()","pinned":false,"hidden":false,"mode":"ojs"},{"id":33,"value":"FIREBASE_CONFIG = ({\n apiKey: \"AIzaSyAqtghLj-S9NX0rj11ynWIovHOj3Wx9bqQ\",\n databaseURL: \"https://calculus-d7a63.firebaseio.com\",\n projectId: \"calculus-d7a63\",\n appId: \"1:55204078424:web:ee6243e9fcb0578e653b2d\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"import { firebase, FKEY } with {\n FIREBASE_CONFIG as firebaseConfig\n} from '@tomlarkworthy/firebase'","pinned":false,"hidden":false,"mode":"ojs"},{"id":124,"value":"import { resize } from '@endpointservices/resize'","pinned":false,"hidden":false,"mode":"ojs"},{"id":154,"value":"md`---\n### [@Mootari's](https://observablehq.com/@mootari) usefuls and handies\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":83,"value":"import { getCurrentPinnedName } from '@mootari/notebook-data@366'","pinned":false,"hidden":false,"mode":"ojs"},{"id":162,"value":"import { signature } from '@mootari/signature'","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}