2c:null 2d:["$","title",null,{"children":"Bootstrap Icon Inspector | Nikita Sharov | Observable"}] 32:[] 30:{"id":"032db344b3c047c2","slug":"bootstrap-icon-inspector","title":"Bootstrap Icon Inspector","thumbnail":"ac6e122352cc79a35a704bfec3fa9be0a0ad09e6cac16e1cf16ff30637509ea7","access_level":"public","create_time":"$D2021-01-21T10:36:21.589Z","update_time":"$D2021-02-23T07:10:34.683Z","view_time":null,"first_public_time":"$D2021-01-22T09:22:17.529Z","has_unpublished_edits":null,"fork":false,"stars":6,"starred":false,"owner":{"type":"team","id":"6c49d8d38db08400","login":"nikita-sharov","name":"Nikita Sharov","avatar_url":"https://avatars-next.observableusercontent.com/544afb614871e9f3bee546cbff7e689f2a454464b16ac434007893bde877f2df","tier":"starter_2024","bio":"Reconstruction worker"},"version":283,"publish_version":283,"role":null,"authored":false,"authors":[{"type":"individual","id":"ee7c67b988c5530c","login":"nikita-sharov","name":"Nikita Sharov","avatar_url":"https://avatars-next.observableusercontent.com/544afb614871e9f3bee546cbff7e689f2a454464b16ac434007893bde877f2df","tier":null,"bio":"Retired developer and power user"}],"members":[{"type":"individual","id":"ee7c67b988c5530c","login":"nikita-sharov","name":"Nikita Sharov","avatar_url":"https://avatars-next.observableusercontent.com/544afb614871e9f3bee546cbff7e689f2a454464b16ac434007893bde877f2df","tier":null,"role":"editor"}],"comments":[{"id":"61f1a84596c466f8","reply_to_id":null,"content":"hi\nSo cool why not a color slider ! ?","create_time":"$D2021-01-22T09:39:07.401Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"7a942f6159a44dc5","login":"jipexu","name":"","avatar_url":"https://avatars-next.observableusercontent.com/14fecbaa8f3713734646322be91637f05281df26dc77b160732769b2668e58e4","tier":null}},{"id":"5d261da4797530d4","reply_to_id":"61f1a84596c466f8","content":"Hi, yes, indeed!","create_time":"$D2021-01-22T09:48:54.341Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"ee7c67b988c5530c","login":"nikita-sharov","name":"Nikita Sharov","avatar_url":"https://avatars-next.observableusercontent.com/544afb614871e9f3bee546cbff7e689f2a454464b16ac434007893bde877f2df","tier":null}},{"id":"c8781a16c42931a7","reply_to_id":"61f1a84596c466f8","content":"👍","create_time":"$D2021-01-22T10:31:12.955Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"7a942f6159a44dc5","login":"jipexu","name":"","avatar_url":"https://avatars-next.observableusercontent.com/14fecbaa8f3713734646322be91637f05281df26dc77b160732769b2668e58e4","tier":null}}],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"d790527d39b896f6","slug":"icons","title":"Icons","owner":{"id":"6c49d8d38db08400","login":"nikita-sharov","name":"Nikita Sharov"}},"type":"notebook","body":{"titling":"auto","title":"Bootstrap Icon Inspector","cells":[{"id":0,"value":"md`# Bootstrap Icon Inspector`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":113,"value":"viewof iconId = createIconIdSelector()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":180,"value":"iconNumber = createIconNumberSlider()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"viewof cellLength = slider({\n title: \"Cell length\",\n min: 10,\n max: 30, // be responsive, use the width variable\n step: 5,\n value: 20,\n format: d => `${d}px`\n});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"showIcon()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":120,"value":"viewof fillOpacity = slider({\n title: \"Fill opacity\",\n min: 0.1, \n step: 0.1,\n value: 0.3,\n format: \".0%\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":248,"value":"viewof fillColor = {\n const observableTextColor = \"#1b1e23\";\n return color({\n title: \"Fill color\",\n value: observableTextColor\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":203,"value":"md`---\n## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":87,"value":"import {color, select, slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":232,"value":"createIconIdSelector = () => {\n let value = \"battery-charging\";\n \n // see: https://observablehq.com/@nikita-sharov/bootstrap-icons\n // see also: https://observablehq.com/@jashkenas/url-querystrings-and-hash-parameters\n if (location.hash !== \"\") {\n const id = location.hash.slice(1, location.hash.length); // removing the hash character\n if (symbols.has(id)) {\n value = id;\n }\n }\n \n return select({\n title: \"Icon\",\n options: identifiers,\n description: \"Use @nikita-sharov/bootstrap-icons for pre-filtering.\",\n value\n }); \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":77,"value":"symbols = {\n const url = \"https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/bootstrap-icons.svg\";\n const literal = await fetch(url).then(response => response.text());\n const symbols = html`${literal}`.querySelectorAll(\"symbol\");\n const keyValuePairs = Array.from(symbols, symbol => [symbol.id, symbol]);\n return new Map(keyValuePairs);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":194,"value":"identifiers = [...symbols.keys()].sort()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":237,"value":"createIconNumberSlider = () => {\n const getOneBasedValue = () => identifiers.indexOf(viewof iconId.value) + 1;\n \n const iconNumber = slider({\n title: \"Number\",\n min: 1,\n max: identifiers.length,\n value: getOneBasedValue(),\n step: 1,\n description: \"Use keyboard arrow keys to step one icon at a time, when focused.\"\n });\n \n iconNumber.addEventListener(\"input\", (e) => {\n // avoid endless loops\n if (e.detail !== \"ignore\") {\n viewof iconId.input.value = identifiers[iconNumber.value - 1];\n viewof iconId.dispatchEvent(new CustomEvent(\"input\"));\n }\n });\n \n viewof iconId.addEventListener(\"input\", () => {\n iconNumber.input.value = getOneBasedValue();\n iconNumber.dispatchEvent(new CustomEvent(\"input\", {detail: \"ignore\"}));\n })\n \n return iconNumber;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":174,"value":"showIcon = () => {\n const cellCount = 16;\n const sideLength = cellCount * cellLength;\n const composition = `\n`;\n\n return html`\n

\n ${composition}\n

All icons are designed in a 16x16 grid, so far (v1.3).

\n`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":93,"value":"grid = (sideLength, cellLength) => {\n const magicOffset = 0.5; // see: https://stackoverflow.com/a/61013292\n\n const className = (tick) => {\n if ((tick === magicOffset) || (tick === (sideLength + magicOffset))) {\n return \"outer-grid-line\";\n } else {\n return \"inner-grid-line\";\n } \n }\n \n const verticalLine = (x) => \n ``; \n \n const horizontalLine = (y) => \n ``;\n \n let grid = \"\"; \n for (let tick = magicOffset; tick <= (sideLength + magicOffset); tick += cellLength) {\n grid += verticalLine(tick);\n grid += horizontalLine(tick);\n }\n \n return grid;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":92,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1"}} 31:"$30:body"