const WIDGET_CONTENT = `<div style="padding: 10px; border-top: 1px solid var(--main-border-color); contain: none;"> <h3 class="s_material_name"></h3> <table> <tbody class="s_material_props_table"></tbody> </table> </div>`; const TABLE_ENTRY = `<tr> <th scope="row" class="s_material_props_entry_head"></th> <td class="s_material_props_entry_value"></td> </tr>`; function make_table_entry(head, value) { let entry = $(TABLE_ENTRY); entry.find(".s_material_props_entry_head").text(head); entry.find(".s_material_props_entry_value").text(value); return entry; } function atomic_number(note) { if (note.hasLabel("__s_material_atomic_number")) { return make_table_entry("Atomic number", note.getLabelValue("__s_material_atomic_number")); } return null; } class MaterialWidget extends api.NoteContextAwareWidget { static get parentWidget() { return 'right-pane'; } get position() { return 100; } // higher value means position towards the bottom/right get material_data_finders() { return [ atomic_number ]; } doRender() { this.$widget = $(WIDGET_CONTENT); this.$material_name = this.$widget.find(".s_material_name"); this.$props_table = this.$widget.find(".s_material_props_table"); return this.$widget; } isEnabled() { return super.isEnabled() && this.note.type === 'text' && this.note.hasLabel('__s_material'); } async refreshWithNote(note) { const {content} = await note.getNoteComplement(); this.$material_name.text(note.title); this.$props_table.empty(); this.material_data_finders.forEach((func) => { const res = func(note); if (res !== null && res !== undefined) { this.$props_table.append(res); } }); } async entitiesReloadedEvent({loadResults}) { if (loadResults.isNoteContentReloaded(this.noteId)) { this.refresh(); } } } module.exports = MaterialWidget;