Bestiary Template

DST Source Code

HTML Template <div class="wrapper csx"> <div class="uicontainer"> <div class="entity_container"> <span class="dsf dsf_entity_name" defaultString="Entity Name/Link Text" >Entity Name/Link Text</span> <span class="dsf dsf_entity_url" defaultString="Link URL" >Link URL</span> </div> <div class="formatBar"> <button type="button" class="boldButton" title="Bold (Ctrl+B)"></button> <button type="button" class="italicButton" title="Italic (Ctrl+I)"></button> <button type="button" class="underlineButton" title="Underline (Ctrl+U)"></button> <button type="button" class="indentButton" title="Indent (Ctrl+Tab)"></button> </div> <div class="wrapper"> <div class="grid-item"> <span class="dsf dsf_entity_description" defaultString="Entity Blurb" >Entity Blurb</span> </div> <div class="img"> <span class="dsf dsf_entity_image_url" defaultString="Image URL" >Image URL</span> </div> </div> </div> </div>

CSS @import url(https://chainsawxiv.github.io/DST/common/css/csx_dd4e_common.css); .ds_bestiaryTemplate .wrapper { display: grid; grid-template-columns: auto max-content; width: 100%; } .ds_bestiaryTemplate .entity_container { width: 100%; } .ds_bestiaryTemplate .entity_container > div{ padding: 5px 5px 5px 5px; width: 100%; } .ds_bestiaryTemplate .dsf_entity_image_url { display: block; } .ds_bestiaryTemplate .grid-item { text-align: center; } .ds_bestiaryTemplate .img { max-width: 200px; }

JavaScript csx_opts = { 'setupCallback': function(item) { bestiaryTemplate_setup(item); }, 'uiContainer': function() { return document; }, 'defaultFieldValue': 'Click to edit', 'imagePath': 'https://chainsawxiv.github.io/DST/common/images/', 'preloadFiles': [ 'add.png', 'add_hover.png', 'balance.png', 'balance_hover.png', 'bold_active.png', 'bold_hover.png', 'bullet.png', 'crunch.png', 'crunch_hover.png', 'equipment.png', 'equipment_hover.png', 'fb_back_bottom.png', 'fb_back_main.png', 'fb_back_top.png', 'fluff.png', 'fluff_hover.png', 'grab.png', 'grab_hover.png', 'indent.png', 'indent_active.png', 'indent_hover.png', 'italic.png', 'italic_active.png', 'italic_hover.png', 'magic.png', 'magic_hover.png', 'tip.png', 'tip_hover.png', 'trash.png', 'trash_active.png', 'trash_hover.png', 'underline.png', 'underline_active.png', 'underline_hover.png', 'solar/pip_off.png', 'solar/pip_off_hover.png', 'solar/pip_on.png', 'solar/pip_on_hover.png', 'solar/tab01_active.png', 'solar/tab01_inactive.png', 'solar/tab02_active.png', 'solar/tab02_inactive.png', 'solar/tab03_active.png', 'solar/tab03_inactive.png', 'solar/tab04_active.png', 'solar/tab04_inactive.png', 'solar/check_off.png', 'solar/check_off_hover.png', 'solar/check_on.png', 'solar/check_on_hover.png', ], }; function bestiaryTemplate_dataPostLoad(data) { csx_opts.defaultContext = document.getElementById(data.containerId); csx_opts.uiContainer = csx_opts.defaultContext.querySelector('.uicontainer'); csx_opts.isEditable = data.isEditable; var includes = document.createElement('script'); includes.type = 'text/javascript'; includes.src = 'https://chainsawxiv.github.io/DST/common/js/csx_dd4e_common.js'; includes.onload = function() { // Callback to use what you just loaded csx_opts.setupCallback(); }; document.body.appendChild(includes); bestiaryTemplate_addElements('link', 'dsf_entity_url'); bestiaryTemplate_addElements('img', 'dsf_entity_image_url'); } function bestiaryTemplate_addElements(type, css) { let source = document.getElementsByClassName(css)[0]; let name = document.getElementsByClassName('dsf_entity_name')[0]; var elem; if (type == 'img') { elem = document.createElement('img'); elem.src = source.innerText; } else { elem = document.createElement('h1'); var anchor = document.createElement('a'); anchor.href = source.innerText; anchor.target = '_blank'; let linkText = document.createTextNode(name.innerText); anchor.appendChild(linkText); elem.appendChild(anchor); bestiaryTemplate_removeElements(name); } if (source.nextSibling) { source.parentNode.insertBefore(elem, source.nextSibling); } else { source.parentNode.appendChild(elem); } bestiaryTemplate_removeElements(source); } function bestiaryTemplate_removeElements(elem) { if (!csx_opts.isEditable) { elem.remove(); } } function bestiaryTemplate_setup(context) { // Provide default context if (context == undefined) context = csx_opts.defaultContext; // Do setup for interfaces csx_edit(context); }

Submit Notes I simple template to store and display a link to external datasource for full entity details along with a short blurb about the entity as well as formatting an image from a supplied URL. Nothing super fancy here, just saves you time/effort and keeps formatting consistent.

Back