2b:null 2c:["$","title",null,{"children":"w2ui Toolbar | Kreijstal | Observable"}] 31:T900,{ return new w2ui.w2toolbar({ box: toolbar.querySelector("#toolbar"), name: "toolbar", items: [ { type: "button", id: "item1", icon: "w2ui-icon-colors", text: "Click Me", counter: 0, tooltip(item) { return "Number of clicks: " + item.counter; }, onClick(event) { window.alert("clic has been clicked"); console.log("help me"); event.detail.item.counter++; } }, { type: "break" }, { type: "menu-radio", id: "item2", icon: "w2ui-icon-colors", text(item) { let text = item.selected; let el = this.get("item2:" + item.selected); return el.text; }, selected: "id1", items: [ { id: "id1", text: "Place", icon: "w2ui-icon-colors" }, { id: "id2", text: "Event", icon: "w2ui-icon-colors" }, { id: "id3", text: "Item 3", icon: "fa fa-glass" } ], async onRefresh(event) { console.log(event, "new this?"); } }, { type: "break" }, { type: "html", id: "item5", async onRefresh(event) { await event.complete; let fragment = w2ui.query.html(` As DOM Nodes:

Click Me

`); fragment.filter("div").on("click", (event) => { w2ui.w2alert("DIV Clicked"); }); fragment.filter("input").on("input", (event) => { this.value = event.target.value; }); console.log("uhm executed?", this.box, w2ui.query(this.box)); w2ui.query(this.box).find("#tb_toolbar_item_item5").append(fragment); } }, { type: "break" }, { type: "button", id: "item6", icon: "fa fa-star-o", text: "Refresh", tooltip: "Click to refresh entire toolbar.
Note, input value is preserved.", onClick(event) { this.refresh(); } } ] }); }32:[] 2f:{"id":"654d725dbfe5daa8","slug":null,"title":"w2ui Toolbar","thumbnail":"c6c85ff6814f208e9eb1e8ed29aebc4e57364e53456850ba11f4b161c675a14b","access_level":"public","create_time":"$D2022-10-10T10:47:38.264Z","update_time":"$D2022-10-25T15:38:03.086Z","view_time":null,"first_public_time":"$D2022-10-19T12:21:23.653Z","fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"e98ee51a6215f46c","login":"kreijstal","name":"Kreijstal","avatar_url":"https://avatars-next.observableusercontent.com/144042996880d03b1d71eea693abe9dd9944fa11df2d39a67ee64988b390173a","tier":"starter_2024"},"version":83,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"8cb2af93284ec212","login":"kreijstal","name":"Kreijstal","avatar_url":"https://avatars-next.observableusercontent.com/144042996880d03b1d71eea693abe9dd9944fa11df2d39a67ee64988b390173a","tier":null}],"members":[{"type":"individual","id":"8cb2af93284ec212","login":"kreijstal","name":"Kreijstal","avatar_url":"https://avatars-next.observableusercontent.com/144042996880d03b1d71eea693abe9dd9944fa11df2d39a67ee64988b390173a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"w2ui Toolbar","cells":[{"id":0,"value":"# w2ui Toolbar\nThere is this amazing library for toolbars. for when you are too lazy to make your own toolbar, you can simply just use this library","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"toolbar = html`\n\n

\n\n

\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"console.log(html`

b`)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"w2ui = import(\"https://raw.githack.com/vitmalina/w2ui/master/dist/w2ui.es6.js\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"