{"__v":7,"_id":"54d5635632d98b0d00384b0f","category":{"__v":7,"_id":"54d5635632d98b0d00384afd","pages":["54d5635632d98b0d00384b03","54d5635632d98b0d00384b04","54d5635632d98b0d00384b05","54d5635632d98b0d00384b06","54d5635632d98b0d00384b07","54d5635632d98b0d00384b08","54d5635632d98b0d00384b09","54d5635632d98b0d00384b0a","54d5635632d98b0d00384b0b","54d5635632d98b0d00384b0c","54d5635632d98b0d00384b0d","54d5635632d98b0d00384b0e","54d5635632d98b0d00384b0f","54e2254d22de1c230094b156","54e2255622de1c230094b158","54e23b349d045721004cbc26","54e65455d8873117005c773f","54e6b5c0ba1a980d00e3ecb0","551c12c781b8563500fd998e"],"project":"54d53c7b23010a0d001aca0c","version":"54d5635532d98b0d00384afb","sync":{"url":"","isSync":false},"reference":false,"createdAt":"2015-02-06T23:43:39.709Z","from_sync":false,"order":7,"slug":"plugin-base-classes","title":"Plugin Base Classes"},"parentDoc":null,"project":"54d53c7b23010a0d001aca0c","user":"54cfa8e1a8a4fd0d00b7fd1d","version":{"__v":10,"_id":"54d5635532d98b0d00384afb","forked_from":"54d53c7c23010a0d001aca0f","project":"54d53c7b23010a0d001aca0c","createdAt":"2015-02-07T00:59:01.934Z","releaseDate":"2015-02-07T00:59:01.934Z","categories":["54d5635632d98b0d00384afc","54d5635632d98b0d00384afd","54d5635632d98b0d00384afe","54d5635632d98b0d00384aff","54d5635632d98b0d00384b00","54d5635632d98b0d00384b01","54d5635632d98b0d00384b02","54d652097e05890d006f153e","54dd1315ca1e5219007e9daa","54e21e2b22de1c230094b147","54e68e62a43fe13500db3879","54fa1d3fe7a0ba2f00306309","551c453a23a1ee190034d19a","551df586e52a0b23000c62b6","551f39be6886f8230055f02a","55a6720751457325000e4d97"],"is_deprecated":false,"is_hidden":false,"is_beta":true,"is_stable":true,"codename":"","version_clean":"0.1.0","version":"0.1"},"updates":[],"next":{"pages":[],"description":""},"createdAt":"2015-02-07T00:03:41.085Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"auth":"required","params":[],"url":""},"isReference":false,"order":6,"body":"The collaboration UI consists of panels that offer certain features. The basic panels are members, notifications and group chat. Collab panels can extend the feature set with new collaboration features.\n\n# Creating a Collab Panel\n\nA basic collab panel is created like this.\n\n```\nvar plugin = new CollabPanel(\"Your Name\", [], { \n    caption: \"Example Panel\", \n    index: 100,\n    height: 100, // Optional height\n    textselect: true, // Optional allowing text selection\n    style: \"flex:1;-webkit-flex:1\" // Optional styles\n});\n```\n\nAnd looks like this.\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/h7fIeB8ThSeXfy7tMSKn_collabpanel.png\",\n        \"collabpanel.png\",\n        \"1570\",\n        \"836\",\n        \"#4c7488\",\n        \"\"\n      ]\n    }\n  ]\n}\n[/block]\n# Adding your own contents\n\nThe easiest way to populate a collab panel is by adding custom html and css. The following example loads css from collabpanel.css and adds a div element to the body of the dialog.\n\n```\nvar plugin = new CollabPanel(\"Your Name\", main.consumes, {\n    caption: \"Example Panel\"\n    index: 500\n});\n\nplugin.on(\"draw\", function(e){\n    // Insert css\n    ui.insertCss(require(\"text!./collabpanel.css\"), options.staticPrefix, plugin);\n\n    // Set some custom HTML\n    e.html.innerHTML = \"<div class='myCSS'>Hello World</div>\";\n});\n```\n\n*Make sure to check out the [ace widgets](doc:ace-tree). They are used by most collab panels and might work well for you too*","excerpt":"","slug":"collab-panel","type":"basic","title":"Collab Panel"}
The collaboration UI consists of panels that offer certain features. The basic panels are members, notifications and group chat. Collab panels can extend the feature set with new collaboration features. # Creating a Collab Panel A basic collab panel is created like this. ``` var plugin = new CollabPanel("Your Name", [], { caption: "Example Panel", index: 100, height: 100, // Optional height textselect: true, // Optional allowing text selection style: "flex:1;-webkit-flex:1" // Optional styles }); ``` And looks like this. [block:image] { "images": [ { "image": [ "https://files.readme.io/h7fIeB8ThSeXfy7tMSKn_collabpanel.png", "collabpanel.png", "1570", "836", "#4c7488", "" ] } ] } [/block] # Adding your own contents The easiest way to populate a collab panel is by adding custom html and css. The following example loads css from collabpanel.css and adds a div element to the body of the dialog. ``` var plugin = new CollabPanel("Your Name", main.consumes, { caption: "Example Panel" index: 500 }); plugin.on("draw", function(e){ // Insert css ui.insertCss(require("text!./collabpanel.css"), options.staticPrefix, plugin); // Set some custom HTML e.html.innerHTML = "<div class='myCSS'>Hello World</div>"; }); ``` *Make sure to check out the [ace widgets](doc:ace-tree). They are used by most collab panels and might work well for you too*