2d:null 2e:["$","title",null,{"children":"Hello Golden layout | Thomas Ballinger | Observable"}] 33:[] 31:{"id":"9f87309f7a5e270c","slug":"hello-golden-layout","title":"Hello Golden layout","thumbnail":"8ad7162d29b3c25bf07522c3caa7dfca43cbdbed639d28b33f26e7accd790db0","access_level":"public","create_time":"$D2020-05-25T01:36:21.110Z","update_time":"$D2020-05-26T16:30:55.347Z","view_time":null,"first_public_time":"$D2020-05-25T15:39:27.386Z","fork":false,"stars":5,"starred":false,"owner":{"type":"team","id":"8d59e5c626effee2","login":"ballingt","name":"Thomas Ballinger","avatar_url":"https://avatars-next.observableusercontent.com/fdc16c011489d914c05fa5992a7992413727fc69e4f73671ec38919807f547e7","tier":"starter_2024"},"version":232,"publish_version":232,"role":null,"authored":false,"authors":[{"type":"individual","id":"4c607438c80998ad","login":"ballingt","name":"Thomas Ballinger","avatar_url":"https://avatars-next.observableusercontent.com/fdc16c011489d914c05fa5992a7992413727fc69e4f73671ec38919807f547e7","tier":null}],"members":[{"type":"individual","id":"4c607438c80998ad","login":"ballingt","name":"Thomas Ballinger","avatar_url":"https://avatars-next.observableusercontent.com/fdc16c011489d914c05fa5992a7992413727fc69e4f73671ec38919807f547e7","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":6,"collection":null,"type":"notebook","body":{"title":"Hello Golden layout","cells":[{"id":0,"value":"md`# Hello Golden layout\n\nDrag and drop window management. http://golden-layout.com/\n\n[Apparently](https://golden-layout.com/faq/), [these](http://docker.webcabin.org/) [kinds](http://phosphorjs.github.io/examples/dockpanel/) of [things](https://golden-layout.com/) are called dockers.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"GoldenLayout = require('https://unpkg.com/golden-layout@1.5.9/dist/goldenlayout.js')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"{\n const newItemConfig = {\n type: 'component',\n componentName: 'iframeComponent',\n componentState: { label: 'You drug me into a layout' }\n };\n const thing = html`drag me into the layout!`;\n setTimeout(() => {\n layout.createDragSource(thing, newItemConfig);\n });\n\n return thing;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"target = {\n const target = html`

\n \n \n

`;\n return target;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"layout = {\n target; // if the DOM target changes, this code should rerun\n const layout = new GoldenLayout(initialConfig, jquery('#target'));\n layout.registerComponent('iframeComponent', iframeComponent);\n layout.registerComponent('simpleComponent', simpleComponent);\n layout.init();\n invalidation.then(() => layout.destroy()); // avoid layouts stacking up\n return layout;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"initialConfig = ({\n content: [\n {\n type: 'row',\n content: [\n {\n type: 'component',\n componentName: 'iframeComponent',\n componentState: { src: \"https://placekitten.com/\" }\n },\n {\n type: 'column',\n content: [\n {\n type: 'component',\n componentName: 'iframeComponent',\n componentState: { label: 'This is content inside an iframe' }\n },\n {\n type: 'component',\n componentName: 'simpleComponent',\n componentState: { label: \"The iframes aren't required\" }\n }\n ]\n }\n ]\n }\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"iframeComponent = function(container, componentState) {\n container.on('resize', () => {\n const iframe = container.getElement().get(0).childNodes[0];\n iframe.width = container.width;\n iframe.height = container.height;\n });\n // This code seems to run only once; attach .on event handlers to react to changes,\n // don't expect this code to be rerun.\n const newChild = componentState.src\n ? html``;\n container\n .getElement()\n .get(0)\n .appendChild(newChild);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":203,"value":"simpleComponent = function(container, componentState) {\n container\n .getElement()\n .get(0)\n .appendChild(html`

${componentState.label}

`);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"jquery = require('jquery')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 32:"$31:body"