2b:null 2c:["$","title",null,{"children":"Screen Picker | KyungYeol Kim | Observable"}] 31:T450,viewof img = { let images = [ "data-behind-notebook-5.jpg", "creative-control-5.jpg", "group-pointing-5.jpg", "magic-notebook-8.jpg", "private-notebooks-4.jpg", "collaborate-4.jpg", "mug-5.jpg", "paper-airplane-3.jpg", "briefcase-2.jpg" ].map(img => { let version = +img.match(/(\d).jpg$/)[1]; let slug = img.replace(/(\d).jpg$/, ""); return { slug, version }; }); let options = images.map((img, i) => { let opt = html`

`; opt.addEventListener("click", function() { ui.value = img; ui.dispatchEvent(new CustomEvent("input")); for (let im of ui.querySelectorAll("div")) { im.style.opacity = im === this ? 1 : 0.5; } }); return opt; }); let ui = html`

${options}

`; ui.value = images[0]; return ui; }32:T5c0,viewof screen = { let data = [ {screen: "07370E45-5687-4DDB-97AC-ECAD1DCAF117.png", description: "screen A"}, {screen: "5718D3FC-53E6-4A4C-8EC9-1BDFCE71CD35.png", description: "screen B"}, {screen: "BF02B323-C5D8-4365-90B2-C649D3B6CF83.png", description: "screen C"}, {screen: "2CC85CBA-CD9D-4E10-A7AC-78AFB3C790AB.png", description: "screen D"}, {screen: "8BBF5728-E460-499E-9356-83EAA4DE882B.png", description: "screen E"}, {screen: "2D8340C3-46CD-444E-B559-F44C6B7BFFA7.png", description: "screen F"}, {screen: "9CF05069-BB81-41C5-B727-477357410A09.png", description: "screen G"}, {screen: "3BF551DC-FBD6-43D6-B6E3-550CCCFCCB2D.png", description: "screen H"}, {screen: "538F0F60-F612-435E-897A-1DAA77CDC698.png", description: "screen J"} ]; let options = data.map((d, i) => { let opt = html`

`; opt.addEventListener("click", function(e) { ui.value = d; ui.dispatchEvent(new CustomEvent("input")); for (let im of ui.querySelectorAll("div")) { im.style.opacity = im === this ? 1 : 0.5; } }); return opt; }); let ui = html`

${options}

`; ui.value = data[0]; return ui; }33:[] 2f:{"id":"7dc4e775aa71a4b3","slug":"screen-picker","title":"Screen Picker","thumbnail":"cfcedc191b3257db5424ab027a415918bc70a131655d0b26c8c4f959af24d2df","access_level":"public","create_time":"$D2019-07-02T06:31:16.655Z","update_time":"$D2019-07-26T17:34:43.529Z","view_time":null,"first_public_time":"$D2019-07-26T17:34:51.284Z","fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"56a62604da372f41","login":"chitacan","name":"KyungYeol Kim","avatar_url":"https://avatars-next.observableusercontent.com/ebe2bc4618021a6392db1d0169bbe2af3520871861d6f0659384f97da78200ce","tier":"starter_2024"},"version":56,"publish_version":56,"role":null,"authored":false,"authors":[{"type":"individual","id":"e4a45eb07cd703f7","login":"chitacan","name":"KyungYeol Kim","avatar_url":"https://avatars-next.observableusercontent.com/ebe2bc4618021a6392db1d0169bbe2af3520871861d6f0659384f97da78200ce","tier":null}],"members":[{"type":"individual","id":"e4a45eb07cd703f7","login":"chitacan","name":"KyungYeol Kim","avatar_url":"https://avatars-next.observableusercontent.com/ebe2bc4618021a6392db1d0169bbe2af3520871861d6f0659384f97da78200ce","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":4,"collection":null,"type":"notebook","body":{"title":"Screen Picker","cells":[{"id":0,"value":"md`# Screen Picker\n\ninspired by awesome [@tmcw/watercolor-versions](https://observablehq.com/@tmcw/watercolor-versions) notebook 💖`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"img","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"screen","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"html`