Obsidian Portal
Menu
Sign In / Create Account
JavaScript is currently disabled. Obsidian Portal has a lot of really cool features that use JavaScript. You should check them out. We think you'll have a much more enjoyable experience.
Home
Campaigns
Games Nearby
Plans
Community
Help
Blog
Dresden Files
Author:
jbteller4
Slug:
dfrpg_jbteller4
System:
The Dresden Files
DST Source Code
HTML Template
<div class="wrapper"> <div class="background_image"><img src="http://imagebarn.us/images/jbteller4/background_top.gif" alt=""/></div> <div class="main"> <div class="left_column"> <div class="portrait_holder"><span class="dsf dsf_avatar_image"></span></div> <div class="section_left"> <div class="section_head">Skills</div> <div class="row_title bold small_caps underline"> <span class="skill">Skill:</span> <span class="skill_rank">Adjective (+Rank)</span> </div> <div class="row_body"> <span class="skill">Alertness:</span> <span class="skill_rank dsf dsf_alertness"></span><br/> <span class="skill">Athletics:</span> <span class="skill_rank dsf dsf_athletics"></span><br/> <span class="skill">Burglary:</span> <span class="skill_rank dsf dsf_burglary"></span><br/> <span class="skill">Contacts:</span> <span class="skill_rank dsf dsf_contacts"></span><br/> <span class="skill">Conviction:</span> <span class="skill_rank dsf dsf_conviction"></span><br/> <span class="skill">Craftsmanship:</span> <span class="skill_rank dsf dsf_craftsmanship"></span><br/> <span class="skill">Deceit:</span> <span class="skill_rank dsf dsf_deceit"></span><br/> <span class="skill">Discipline:</span> <span class="skill_rank dsf dsf_discipline"></span><br/> <span class="skill">Driving:</span> <span class="skill_rank dsf dsf_driving"></span><br/> <span class="skill">Empathy:</span> <span class="skill_rank dsf dsf_empathy"></span><br/> <span class="skill">Endurance:</span> <span class="skill_rank dsf dsf_endurance"></span><br/> <span class="skill">Fists:</span> <span class="skill_rank dsf dsf_fists"></span><br/> <span class="skill">Guns:</span> <span class="skill_rank dsf dsf_guns"></span><br/> <span class="skill">Intimidation:</span> <span class="skill_rank dsf dsf_intimidation"></span><br/> <span class="skill">Investigation:</span> <span class="skill_rank dsf dsf_investigation"></span><br/> <span class="skill">Lore:</span> <span class="skill_rank dsf dsf_lore"></span><br/> <span class="skill">Might:</span> <span class="skill_rank dsf dsf_might"></span><br/> <span class="skill">Performance:</span> <span class="skill_rank dsf dsf_performance"></span><br/> <span class="skill">Presence:</span> <span class="skill_rank dsf dsf_presence"></span><br/> <span class="skill">Rapport:</span> <span class="skill_rank dsf dsf_rapport"></span><br/> <span class="skill">Resources:</span> <span class="skill_rank dsf dsf_resources"></span><br/> <span class="skill">Scholarship:</span> <span class="skill_rank dsf dsf_scholarship"></span><br/> <span class="skill">Stealth:</span> <span class="skill_rank dsf dsf_stealth"></span><br/> <span class="skill">Survival:</span> <span class="skill_rank dsf dsf_survival"></span><br/> <span class="skill">Weapons:</span> <span class="skill_rank dsf dsf_weapons"></span><br/> </div> </div> <div class="section_left"> <div class="section_head">Stress</div> <div class="row_title"> <span class="stress_label_first">1</span> <span class="stress_label">2</span> <span class="stress_label">3</span> <span class="stress_label">4</span> <span class="stress_label">5</span> <span class="stress_label">6</span> <span class="stress_label">7</span> <span class="stress_label">8</span> </div> <div class="row_title"> <span class="stress_type bold">Physical</span> <span class="readonly pipsRange_8 dsf dsf_stress_physical"></span> </div> <div class="row_title"> <span class="stress_type italic">Toughness (Catch)</span> <span class="readonly pipsRange_6 dsf dsf_stress_toughness"></span> </div> <div class="row_title"> <span class="stress_type bold">Mental</span> <span class="readonly pipsRange_8 dsf dsf_stress_mental"></span> </div> <div class="row_title"> <span class="stress_type bold">Social</span> <span class="readonly pipsRange_8 dsf dsf_stress_social"></span> </div> <div class="row_title"> <span class="stress_type bold">Hunger</span> <span class="readonly pipsRange_8 dsf dsf_stress_hunger"></span> </div> </div> <div class="section_left"> <div class="section_head">Power Level</div> <div class="row_body"> <span class="power_level bold space_below">Power Level:</span> <span class="power_level_value dsf dsf_power_level"></span><br/> <span class="power_level bold">Refresh Spent:</span> <span class="power_level_value dsf dsf_refresh_spent"></span><br/> <span class="power_level bold">Starting Refresh:</span> <span class="power_level_value dsf dsf_refresh_start"></span><br/> <span class="power_level bold">Current Refresh:</span> <span class="power_level_value dsf dsf_refresh_current"></span> </div> </div> <div class="section_left"> <div class="section_head">Notes<a class="interface listAdd" title="Add Note" onclick="dfrpg_jbteller4_getElementsByClassName('list_notes')[0].addItem();"><img src="http://imagebarn.us/images/jbteller4/plus_icon.gif" alt="+"/></a></div> <div class="list_notes listColumns_1"> <div class="template"> <div class="row_body"> <a class="listDemote interface" title="Move this item down"><img src="http://imagebarn.us/images/jbteller4/down_arrow_icon.gif" alt="↓"/></a> <a class="listPromote interface" title="Move this item up"><img src="http://imagebarn.us/images/jbteller4/up_arrow_icon.gif" alt="↑"/></a> <a class="listDelete interface" title="Delete this item"><img src="http://imagebarn.us/images/jbteller4/delete_icon.gif" alt="X"/></a> <span class="dsf dsf_note_ note hanging_indent"></span> </div> </div> </div> </div> <div class-"section_left"> <div class="row_title center"> <span class="dst_author_label bold small_caps">Sheet by:</span> <span class="dsf dsf_dst_author dst_author"></span> </div> </div> </div> <div class="right_column"> <div class="page_head"> <img src="http://imagebarn.us/images/jbteller4/title.gif" alt=""/> </div> <div class="section_right"> <div class="row_body big"> <span class="basic_info bold">Name:</span> <span class="basic_info_value space_below dsf dsf_name"></span> </div> <div class="row_body"> <span class="basic_info bold">Campaign:</span> <span class="basic_info_value dsf dsf_campaign"></span><br/> <span class="basic_info bold">Player:</span> <span class="basic_info_value dsf dsf_player"></span><br/> </div> </div> <div class="section_right"> <div class="section_head">Aspects</div> <div class="row_title bold small_caps">High Concept:</div> <div class="row_body"><span class="aspect dsf dsf_aspect_high_concept"></span></div> <div class="row_title bold small_caps">Trouble:</div> <div class="row_body"><span class="aspect dsf dsf_aspect_trouble"></span></div> <div class="row_title bold small_caps">Other Aspects:<a class="interface listAdd" title="Add Aspect" onclick="dfrpg_jbteller4_getElementsByClassName('list_aspects')[0].addItem();"><img src="http://imagebarn.us/images/jbteller4/plus_icon.gif" alt="+"/></a></div> <div class="list_aspects listColumns_1"> <div class="template"> <div class="row_body"> <a class="listDemote interface" title="Move this item down"><img src="http://imagebarn.us/images/jbteller4/down_arrow_icon.gif" alt="↓"/></a> <a class="listPromote interface" title="Move this item up"><img src="http://imagebarn.us/images/jbteller4/up_arrow_icon.gif" alt="↑"/></a> <a class="listDelete interface" title="Delete this item"><img src="http://imagebarn.us/images/jbteller4/delete_icon.gif" alt="X"/></a> <span class="dsf dsf_aspect_ aspect_other hanging_indent"></span> </div> </div> </div> </div> <div class="section_right"> <div class="section_head">Stunts & Powers</div> <div class="row_title bold small_caps underline"> <span class="stunt_cost bold">Cost</span> <span class="stunt bold">Ability</span><a class="interface listAdd" title="Add Stunt" onclick="dfrpg_jbteller4_getElementsByClassName('list_stunts')[0].addItem();"><img src="http://imagebarn.us/images/jbteller4/plus_icon.gif" alt="+"/></a> </div> <div class="list_stunts listColumns_2"> <div class="template"> <div class="row_body"> <a class="listDemote interface" title="Move this item down"><img src="http://imagebarn.us/images/jbteller4/down_arrow_icon.gif" alt="↓"/></a> <a class="listPromote interface" title="Move this item up"><img src="http://imagebarn.us/images/jbteller4/up_arrow_icon.gif" alt="↑"/></a> <a class="listDelete interface" title="Delete this item"><img src="http://imagebarn.us/images/jbteller4/delete_icon.gif" alt="X"/></a> <span class="dsf dsf_stunt_cost_ stunt_cost"></span> <span class="dsf dsf_stunt_ stunt"></span> </div> </div> </div> </div> <div class="section_right"> <div class="section_head">Consequences</div> <div class="row_title bold small_caps underline"> <span class="consequence_type">Type</span> <span class="consequence_category">P/M/S</span> <span class="consequence_stress">Stress</span> <span class="consequence_used">Used?</span> <span class="consequence_aspect">Aspect</span></a> </div> <div class="row_body"> <span class="consequence_type">Mild</span> <span class="consequence_category">Any</span> <span class="consequence_stress">-2</span> <span class="consequence_used dsf dsf_consequence_mild_used checkbox"></span> <span class="consequence_aspect dsf dsf_consequence_mild_aspect"></span> </div> <div class="row_body"> <span class="consequence_type">Moderate</span> <span class="consequence_category">Any</span> <span class="consequence_stress">-4</span> <span class="consequence_used dsf dsf_consequence_moderate_used checkbox"></span> <span class="consequence_aspect dsf dsf_consequence_moderate_aspect"></span> </div> <div class="row_body"> <span class="consequence_type">Severe</span> <span class="consequence_category">Any</span> <span class="consequence_stress">-6</span> <span class="consequence_used dsf dsf_consequence_severe_used checkbox"></span> <span class="consequence_aspect dsf dsf_consequence_severe_aspect"></span> </div> <div class="row_body"> <span class="dsf dsf_consequence_other_type_1 consequence_type"></span> <span class="dsf dsf_consequence_other_category_1 consequence_category"></span> <span class="dsf dsf_consequence_other_stress_1 consequence_stress"></span> <span class="dsf dsf_consequence_other_used_1 consequence_used checkbox"></span> <span class="dsf dsf_consequence_other_aspect_1 consequence_aspect"></span> </div> <div class="row_body"> <span class="dsf dsf_consequence_other_type_2 consequence_type"></span> <span class="dsf dsf_consequence_other_category_2 consequence_category"></span> <span class="dsf dsf_consequence_other_stress_2 consequence_stress"></span> <span class="dsf dsf_consequence_other_used_2 consequence_used checkbox"></span> <span class="dsf dsf_consequence_other_aspect_2 consequence_aspect"></span> </div> <div class="row_body"> <span class="dsf dsf_consequence_other_type_3 consequence_type"></span> <span class="dsf dsf_consequence_other_category_3 consequence_category"></span> <span class="dsf dsf_consequence_other_stress_3 consequence_stress"></span> <span class="dsf dsf_consequence_other_used_3 consequence_used checkbox"></span> <span class="dsf dsf_consequence_other_aspect_3 consequence_aspect"></span> </div> <div class="row_body"> <span class="consequence_type">Extreme</span> <span class="consequence_category">Any</span> <span class="consequence_stress">-8</span> <span class="consequence_used dsf dsf_consequence_extreme_used checkbox"></span> <span class="consequence_aspect italic">Replace a Permanent</span> </div> </div> <div class="section_right"> <div class="section_head">Spellcasting</div> <div class="row_title bold space_below small_caps space_above">Elements & Specializations:<a class="interface listAdd" title="Add Element or Specialization" onclick="dfrpg_jbteller4_getElementsByClassName('list_specializations')[0].addItem();"><img src="http://imagebarn.us/images/jbteller4/plus_icon.gif" alt="+"/></a></div> <div class="list_specializations listColumns_1"> <div class="template"> <div class="row_body"> <a class="listDemote interface" title="Move this item down"><img src="http://imagebarn.us/images/jbteller4/down_arrow_icon.gif" alt="↓"/></a> <a class="listPromote interface" title="Move this item up"><img src="http://imagebarn.us/images/jbteller4/up_arrow_icon.gif" alt="↑"/></a> <a class="listDelete interface" title="Delete this item"><img src="http://imagebarn.us/images/jbteller4/delete_icon.gif" alt="X"/></a> <span class="dsf dsf_specialization_ spellcasting hanging_indent"></span> </div> </div> </div> <div class="row_title bold space_below small_caps space_above">Focus Items:<a class="interface listAdd" title="Add Focus Item" onclick="dfrpg_jbteller4_getElementsByClassName('list_focus_items')[0].addItem();"><img src="http://imagebarn.us/images/jbteller4/plus_icon.gif" alt="+"/></a></div> <div class="list_focus_items listColumns_1"> <div class="template"> <div class="row_body"> <a class="listDemote interface" title="Move this item down"><img src="http://imagebarn.us/images/jbteller4/down_arrow_icon.gif" alt="↓"/></a> <a class="listPromote interface" title="Move this item up"><img src="http://imagebarn.us/images/jbteller4/up_arrow_icon.gif" alt="↑"/></a> <a class="listDelete interface" title="Delete this item"><img src="http://imagebarn.us/images/jbteller4/delete_icon.gif" alt="X"/></a> <span class="dsf dsf_focus_item_ spellcasting hanging_indent"></span> </div> </div> </div> <div class="row_title bold space_below small_caps space_above">Rotes:<a class="interface listAdd" title="Add Rotes" onclick="dfrpg_jbteller4_getElementsByClassName('list_rotes')[0].addItem();"><img src="http://imagebarn.us/images/jbteller4/plus_icon.gif" alt="+"/></a></div> <div class="list_rotes listColumns_1"> <div class="template"> <div class="row_body"> <a class="listDemote interface" title="Move this item down"><img src="http://imagebarn.us/images/jbteller4/down_arrow_icon.gif" alt="↓"/></a> <a class="listPromote interface" title="Move this item up"><img src="http://imagebarn.us/images/jbteller4/up_arrow_icon.gif" alt="↑"/></a> <a class="listDelete interface" title="Delete this item"><img src="http://imagebarn.us/images/jbteller4/delete_icon.gif" alt="X"/></a> <span class="dsf dsf_rote_ spellcasting hanging_indent"></span> </div> </div> </div> <div class="row_title bold space_below small_caps space_above">Enchanted Items:<a class="interface listAdd" title="Add Enchanted Item" onclick="dfrpg_jbteller4_getElementsByClassName('list_enchanted_items')[0].addItem();"><img src="http://imagebarn.us/images/jbteller4/plus_icon.gif" alt="+"/></a></div> <div class="list_enchanted_items listColumns_1"> <div class="template"> <div class="row_body"> <a class="listDemote interface" title="Move this item down"><img src="http://imagebarn.us/images/jbteller4/down_arrow_icon.gif" alt="↓"/></a> <a class="listPromote interface" title="Move this item up"><img src="http://imagebarn.us/images/jbteller4/up_arrow_icon.gif" alt="↑"/></a> <a class="listDelete interface" title="Delete this item"><img src="http://imagebarn.us/images/jbteller4/delete_icon.gif" alt="X"/></a> <span class="dsf dsf_focus_item_ spellcasting hanging_indent"></span> </div> </div> </div> <div class="row_title bold small_caps space_above">Potions:<a class="interface listAdd" title="Add Potion" onclick="dfrpg_jbteller4_getElementsByClassName('list_potions')[0].addItem();"><img src="http://imagebarn.us/images/jbteller4/plus_icon.gif" alt="+"/></a></div> <div class="row_body"> <span class="potion_slots_head bold small_caps space_below">Open Slots:</span> <span class="dsf dsf_potion_slots potion_slots"></span> </div> <div class="list_potions listColumns_1"> <div class="template"> <div class="row_body"> <a class="listDemote interface" title="Move this item down"><img src="http://imagebarn.us/images/jbteller4/down_arrow_icon.gif" alt="↓"/></a> <a class="listPromote interface" title="Move this item up"><img src="http://imagebarn.us/images/jbteller4/up_arrow_icon.gif" alt="↑"/></a> <a class="listDelete interface" title="Delete this item"><img src="http://imagebarn.us/images/jbteller4/delete_icon.gif" alt="X"/></a> <span class="dsf dsf_enchanted_item_ spellcasting hanging_indent"></span> </div> </div> </div> <div class="row_title bold small_caps space_above">Other Spellcasting Notes:<a class="interface listAdd" title="Add Other Spellcasting Notes" onclick="dfrpg_jbteller4_getElementsByClassName('list_spellcasting_notes')[0].addItem();"><img src="http://imagebarn.us/images/jbteller4/plus_icon.gif" alt="+"/></a></div> <div class="list_spellcasting_notes listColumns_1"> <div class="template"> <div class="row_body"> <a class="listDemote interface" title="Move this item down"><img src="http://imagebarn.us/images/jbteller4/down_arrow_icon.gif" alt="↓"/></a> <a class="listPromote interface" title="Move this item up"><img src="http://imagebarn.us/images/jbteller4/up_arrow_icon.gif" alt="↑"/></a> <a class="listDelete interface" title="Delete this item"><img src="http://imagebarn.us/images/jbteller4/delete_icon.gif" alt="X"/></a> <span class="dsf dsf_spellcasting_notes_ spellcasting hanging_indent"></span> </div> </div> </div> </div> </div> <div class="full_page"> <div class="section_full"> <div class="section_head">Biography</div> <div class="row_body"> <span class="dsf dsf_bio"></span> </div> </div> </div> <img src="http://imagebarn.us/images/jbteller4/background_bottom.gif" alt=""/> </div> </div>
CSS
/**************************** /**************************** * This is the CSS for the DST. * Copy and paste this directly into the CSS textarea on obsidianportal.com *****************************/ /**************************************** ***************************************** * Layout Classes ***************************************** ****************************************/ /**************************** * Wrapper *****************************/ .ds_dfrpg_jbteller4 .wrapper{ position:relative; } /**************************** * Main (Page Frame) *****************************/ .ds_dfrpg_jbteller4 .main { width: 730px; display:block; margin-top: 0px; margin-bottom: 0px; float: left; background-image:url('http://imagebarn.us/images/jbteller4/background_middle.gif'); } /**************************** * Background Image *****************************/ .ds_dfrpg_jbteller4 .background_image { position:relative; margin-bottom:0px; z-index:0; } /**************************** * Left Column *****************************/ .ds_dfrpg_jbteller4 .left_column { width: 260px; margin-top: 10px; margin-left: 20px; float: left; } /**************************** * Right Column *****************************/ .ds_dfrpg_jbteller4 .right_column { width: 420px; margin-top: 10px; margin-right: 20px; float: right; clear: right; } /**************************** * Full Page Column (Biography) *****************************/ .ds_dfrpg_jbteller4 .full_page { width: 730px; margin-top: 10px; margin-left: 20px; float: left; } /**************************** * Portrait Holder *****************************/ .ds_dfrpg_jbteller4 .portrait_holder { border: 2px solid #000; padding: 2px; width: 256px; margin-top: 10px; margin-bottom: 10px; background-color: white; -moz-border-radius: 10px; -webkit-border-radius: 10px; } /**************************** * Title (Image) *****************************/ .ds_dfrpg_jbteller4 .page_head { margin-top: 25px; margin-bottom: 20px; text-align: center; } /**************************** * Section Box - Left Column *****************************/ .ds_dfrpg_jbteller4 .section_left { border: 2px solid #000; padding: 10px; width: 240px; margin-top: 10px; margin-bottom: 10px; background-color: white; -moz-border-radius: 10px; -webkit-border-radius: 10px; } /**************************** * Section Box - Right Column *****************************/ .ds_dfrpg_jbteller4 .section_right { border: 2px solid #000; padding: 10px; width: 400px; margin-top: 10px; margin-bottom: 10px; background-color: white; -moz-border-radius: 10px; -webkit-border-radius: 10px; } /**************************** * Section Box - Full Page (Biography) *****************************/ .ds_dfrpg_jbteller4 .section_full { border: 2px solid #000; padding: 10px; width: 670px; margin-top: 10px; margin-bottom: 10px; background-color: white; -moz-border-radius: 10px; -webkit-border-radius: 10px; } /**************************** * Skill Name *****************************/ .ds_dfrpg_jbteller4 .skill { display:inline-block; vertical-align:top; } /**************************** * Skill Rank *****************************/ .ds_dfrpg_jbteller4 .skill_rank { display:inline-block; vertical-align:top; margin-left: 5px; } /**************************** * Stress Numbering Labels *****************************/ .ds_dfrpg_jbteller4 .skill_label { position:relative; float:right; width: 15px; display:inline-block; vertical-align:top; } /**************************** * Stress Numbering Labels - Last *****************************/ .ds_dfrpg_jbteller4 .skill_label_last { position:relative; float:right; margin-right: 9px; width: 13px; display:inline-block; vertical-align:top; } /**************************** * Stress Type *****************************/ .ds_dfrpg_jbteller4 .stress_type { width: 115px; display:inline-block; vertical-align:top; } /**************************** * Stress First Number Label *****************************/ .ds_dfrpg_jbteller4 .stress_label_first { width: 11px; position: relative; margin-left: 122px; display:inline-block; vertical-align:top; text-align: center; } /**************************** * Stress Numbering Labels *****************************/ .ds_dfrpg_jbteller4 .stress_label { width: 11px; display:inline-block; vertical-align:top; text-align: center; } /**************************** * Power Level label *****************************/ .ds_dfrpg_jbteller4 .power_level { width: 110px; display:inline-block; vertical-align:top; } /**************************** * Power Level Values *****************************/ .ds_dfrpg_jbteller4 .power_level_value { width: 120px; position: relative; margin-left: 0px; display:inline-block; vertical-align:top; } /**************************** * Notes (Full column) *****************************/ .ds_dfrpg_jbteller4 .note { display:inline-block; margin:0px 0px 1px 0px; min-height:16px; width:195px; } /**************************** * Basic Info label *****************************/ .ds_dfrpg_jbteller4 .basic_info { width: 75px; display:inline-block; vertical-align:top; } /**************************** * Basic Info Values *****************************/ .ds_dfrpg_jbteller4 .basic_info_value { width: 320px; position: relative; margin-left: 0px; display:inline-block; vertical-align:top; } /**************************** * Aspect Name (Full column) *****************************/ .ds_dfrpg_jbteller4 .aspect { display:inline-block; margin:0px 0px 1px 10px; min-height:16px; width:385px; } /**************************** * Aspect Name (With List controls) *****************************/ .ds_dfrpg_jbteller4 .aspect_other { display:inline-block; margin:0px 0px 1px 10px; min-height:16px; width:345px; } /**************************** * Stunt & Power Cost *****************************/ .ds_dfrpg_jbteller4 .stunt_cost { width:30px; display:inline-block; vertical-align:top; text-align: center; } /**************************** * Stunt & Power Name *****************************/ .ds_dfrpg_jbteller4 .stunt { position:relative; width: 320px; display:inline-block; vertical-align:top; margin:0px 0px 1px 0px; min-height:16px; } /**************************** * Consequence Type *****************************/ .ds_dfrpg_jbteller4 .consequence_type { width: 60px; display:inline-block; vertical-align:top; } /**************************** * Consequence Category (P/M/S) *****************************/ .ds_dfrpg_jbteller4 .consequence_category { position: relative; margin-left: 0px; width: 50px; display:inline-block; vertical-align:top; } /**************************** * Consequence Stress *****************************/ .ds_dfrpg_jbteller4 .consequence_stress { position: relative; margin-left: 0px; width: 35px; display:inline-block; vertical-align:top; } /**************************** * Consequence Used? *****************************/ .ds_dfrpg_jbteller4 .consequence_used { position: relative; margin-left: 0px; width: 30px; display:inline-block; vertical-align:top; } /**************************** * Consequence Aspect *****************************/ .ds_dfrpg_jbteller4 .consequence_aspect { position: relative; margin-left: 0px; width: 170px; display:inline-block; vertical-align:top; } /**************************** * Spellcasting Notes *****************************/ .ds_dfrpg_jbteller4 .spellcasting { display:inline-block; margin:0px 0px 1px 10px; min-height:16px; width:345px; } /**************************** * Potion Slots Header *****************************/ .ds_dfrpg_jbteller4 .potion_slots_head { display:inline-block; vertical-align:top; margin-left: 10px; width:90px; } /**************************** * Potion Slots *****************************/ .ds_dfrpg_jbteller4 .potion_slots { display:inline-block; vertical-align:top; margin-left: 0px; width:75px; } /**************************** * Potion Name *****************************/ .ds_dfrpg_jbteller4 .potion { display:inline-block; vertical-align:top; margin-left: 10px; width:90px; } /**************************** * Potion Duration *****************************/ .ds_dfrpg_jbteller4 .potion_duration { display:inline-block; vertical-align:top; margin-left: 0px; width:60px; } /**************************** * Potion Effect *****************************/ .ds_dfrpg_jbteller4 .potion_effect { display:inline-block; vertical-align:top; margin-left: 0px; width:190px; } /**************************** * Biography (Full column) *****************************/ .ds_dfrpg_jbteller4 .biography { display:inline-block; vertical-align:top; margin-left: 0px; width: 390px; } /**************************** * "Sheet By" label (Full column) *****************************/ .ds_dfrpg_jbteller4 .dst_author_label { display:inline-block; vertical-align:top; margin-left: 0px; width: 75px; } /**************************** * "Sheet By" Value *****************************/ .ds_dfrpg_jbteller4 .dst_author { display:inline-block; vertical-align:top; margin-left: 0px; width: 125px; } /**************************************** ***************************************** * Pips Interface Styles ***************************************** ****************************************/ /**************************** * Pips - 6 (Toughness Stress) *****************************/ .ds_dfrpg_jbteller4 .pipsRange_6 { position:relative; margin-left: 0px; z-index:2; top:1px; width:91px; display:inline-block; vertical-align:top; } /**************************** * Pips - 7 (Skills) *****************************/ .ds_dfrpg_jbteller4 .pipsRange_7 { position:relative; z-index:2; float:right; margin-right: 10px; top:1px; width:106px; display:inline-block; vertical-align:top; } /**************************** * Pips - 8 (Stress) *****************************/ .ds_dfrpg_jbteller4 .pipsRange_8 { position: relative; margin-left: 0px; z-index:2; top:1px; width:121px; display:inline-block; vertical-align:top; } /**************************************** ***************************************** * List Interface Styles ***************************************** ****************************************/ /**************************** * Pips - 8 (Stress) *****************************/ div.ds_dfrpg_jbteller4 .listAdd{ float:right; cursor:pointer; text-decoration:none; font-size: 1em; color:#776655; } /**************************** * Pips - 8 (Stress) *****************************/ div.ds_dfrpg_jbteller4 .listAdd:hover{ color:#AA9988; } /**************************** * Pips - 8 (Stress) *****************************/ div.ds_dfrpg_jbteller4 .listDelete{ float:right; color:#AA5544; cursor:pointer; letter-spacing:-1px; text-decoration:none; } /**************************** * Pips - 8 (Stress) *****************************/ div.ds_dfrpg_jbteller4 .listDelete:hover{ color:#CC7766; } /**************************** * Pips - 8 (Stress) *****************************/ div.ds_dfrpg_jbteller4 .listPromote{ float:right; cursor:pointer; letter-spacing:-1px; text-decoration:none; color:#776655; } /**************************** * Pips - 8 (Stress) *****************************/ div.ds_dfrpg_jbteller4 .listPromote:hover{ color:#AA9988; } /**************************** * Pips - 8 (Stress) *****************************/ div.ds_dfrpg_jbteller4 .listDemote{ float:right; cursor:pointer; text-decoration:none; color:#776655; } /**************************** * Pips - 8 (Stress) *****************************/ div.ds_dfrpg_jbteller4 .listDemote:hover{ color:#AA9988; } /**************************** * Pips - 8 (Stress) *****************************/ div.ds_dfrpg_jbteller4 .template{ display:none; } /**************************************** ***************************************** * Font & Formatting Classes ***************************************** ****************************************/ /**************************** * Click to edit Placeholder *****************************/ .ds_dfrpg_jbteller4 .edit { font-family: 'times new roman'; font-size: 1em; color: rgb(210,147,12); cursor: text; letter-spacing:-1px; } /**************************** * Section Header Font *****************************/ .ds_dfrpg_jbteller4 .section_head { text-align: center; font-family: "Trebuchet MS"; background-color: white; margin: 0px 0px 5px 0px; color: #8B1300; font-size: 1.2em; font-weight: bold; font-variant: small-caps; } /**************************** * Row Title Font *****************************/ .ds_dfrpg_jbteller4 .row_title { font-family: "Trebuchet MS"; font-size: .8em; margin: 5px 0px 1px 0px; } /**************************** * Row Body Font *****************************/ .ds_dfrpg_jbteller4 .row_body { font-family: "Trebuchet MS"; font-size: .8em; margin-bottom: 1pt; } /**************************** * Hanging Indent *****************************/ .ds_dfrpg_jbteller4 .hanging_indent { padding-left: 10px ; text-indent: -10px ; } /**************************** * Centered *****************************/ .ds_dfrpg_jbteller4 .center { text-align: center; } /**************************** * Left-Aligned *****************************/ .ds_dfrpg_jbteller4 .left { text-align: left; } /**************************** * Right-Aligned *****************************/ .ds_dfrpg_jbteller4 .right { text-align: right; } /**************************** * Bolded *****************************/ .ds_dfrpg_jbteller4 .bold { font-weight: bold; } /**************************** * Italic *****************************/ .ds_dfrpg_jbteller4 .italic { font-style:italic; } /**************************** * Big *****************************/ .ds_dfrpg_jbteller4 .big { font-size: 1em; } /**************************** * Small *****************************/ .ds_dfrpg_jbteller4 .small { font-size: .6em; } /**************************** * Small Caps *****************************/ .ds_dfrpg_jbteller4 .small_caps { font-variant: small-caps; } /**************************** * Underline (bottom border) *****************************/ .ds_dfrpg_jbteller4 .underline { border-bottom: 1px solid #000; } /**************************** * Indent *****************************/ .ds_dfrpg_jbteller4 .indent { margin-left: 10px } /**************************** * Line Spacing - Below *****************************/ .ds_dfrpg_jbteller4 .space_below { margin-bottom: 5px } /**************************** * Line Spacing - Above *****************************/ .ds_dfrpg_jbteller4 .space_above { margin-top: 10px } /**************************** * Colored Text *****************************/ .ds_dfrpg_jbteller4 .color { color: #8B1300; }
Javascript
// Global Storage dfrpg_jbteller4_context = {}; /////////////////////////////////////////////////// // Event Hooks ///////////////////////////////////// /////////////////////////////////////////////////// // Called immediately before the script fills the Span fields with data function dfrpg_jbteller4_dataPreLoad(opts){ // Set the jeditable button aisleten.characters.jeditableSubmit = '<button class="jeditable_submit"><div class="jeditable_submit_text">✓</div></button>'; // Set the test for fields before they're edited aisleten.characters.jeditablePlaceholder = '<div class="edit">[Edit]</div>' } // Called immediately after the script fills the Span fields with data, before jeditable attachement function dfrpg_jbteller4_dataPostLoad(opts){ // Store global context for search by class name dfrpg_jbteller4_context = document.getElementById(opts['containerId']); // Set additional options opts['imagePath'] = 'http://imagebarn.us/images/jbteller4/'; opts['context'] = document.getElementById(opts['containerId']); opts['debugThreshold'] = -1; //Convert interface elements dfrpg_jbteller4_convertLists(opts); dfrpg_jbteller4_convertPips(opts); dfrpg_jbteller4_convertChecks(opts); dfrpg_jbteller4_convertAreas(opts); } // Called immediately before the sheet's data is saved function dfrpg_jbteller4_dataPreSave(opts) { // Set additional options opts['context'] = document.getElementById(opts['containerId']); dfrpg_jbteller4_unconvertPips(opts); dfrpg_jbteller4_unconvertChecks(opts); dfrpg_jbteller4_unconvertAreas(opts); } /////////////////////////////////////////////////// // Pips Interface Control ///////////////////////////// /////////////////////////////////////////////////// // Applies a bunch of pips functionality to the specified element function dfrpg_jbteller4_pips(oElement,opts){ // Store options oElement.setAttribute('optsImagePath',opts['imagePath']); oElement.setAttribute('optsIsEditable',opts['isEditable']); oElement.setAttribute('optsDebugThreshold',opts['debugThreshold']); // Gets the range of the element from its class name oElement.range = function(){ // Get the range from the element's class name var iRange = this.className.match(/pipsRange_[\d]+/)[0].substring(10); // Default if needed, and return if (iRange != 6 && iRange != 7 && iRange != 8){ this.error(1,"Invalid range specification in Pips Element (Element Class: " + this.className + ")"); return 10; } else return iRange; }; // Gets the field value from the embedded image or the text oElement.value = function(){ // Get the value from the image if there is one if (this.getElementsByTagName('img').length){ var sPath = this.getElementsByTagName('img')[0].src; var iValue = parseInt(sPath.substring(sPath.length - 9,sPath.length - 7),10); } // If there's no image, get the value from the text else{ var iValue = parseInt(this.innerHTML); if (this.innerHTML == '') iValue = 0; } // Check the value for bad data, default if needed, and return if (isNaN(iValue) || iValue > this.range() || iValue < 0){ this.error(1,"Invalid value for Pips Element (Element Class: " + this.className + ")"); return 0; } else return iValue; }; // Converts the associated span element's contents to a pips image oElement.showPips = function(){ // Get the image path from options or default if (this.getAttribute('optsImagePath')) var sPath = this.getAttribute('optsImagePath'); else{ this.error(2,'No imagePath specified in options for pips element (Element Class: ' + this.className + ')'); sPath = 'dynamic_sheets/minimal4e/0.1/images/'; } // Skip fields with a value of -1 if (this.value() == -1) return; // Replace the contents with the appropriate pips image this.innerHTML = '<img src="' + sPath + 'pips-' + this.padDigits(this.value(),2) + '-' + this.padDigits(this.range(),2) + '.png" />'; // Activate the pips this.activate(); }; // Converts the associated span element's contents to a text value oElement.showValue = function(){ // Replace the contents with the appropriate value string this.innerHTML = this.value(); }; // Assigns clickability to a pips image element oElement.activate = function(){ // Don't actualy activate anything if we're not in edit mode if (this.getAttribute('optsIsEditable') != 'true') return; // Activate the element's pips interface this.onclick = this.click; // Set the element's alt text this.title = 'Click to set value'; // Set the cursor for the item this.style.cursor = 'pointer'; }; // Click event handler for the pips interface oElement.click = function(e){ // Provide cross-browser support for the event information var oEvent; if (window.event) oEvent = window.event; else oEvent = e; // Set the pixel thresholds for each pip var aThresholds = [0,15,30,45,60,75,90,105,120]; // Get the pips image that was clicked as a pips object var oImage = this.getElementsByTagName('img')[0]; // Walk up the offset parent tree to get the true click coords var oTemp = oImage; var iX = oTemp.offsetLeft; if (oTemp.offsetParent){ while (oTemp = oTemp.offsetParent){ iX += oTemp.offsetLeft; } } // Determine which pip the click was on and change the image var iClickX = oEvent.clientX - iX; for (var iScore = this.range(); iScore >= 0; iScore--){ if (iClickX > aThresholds[iScore]){ // If the user clicks the current score, they probably want to reduce by one if ((iScore + 1) == this.value()){ oImage.src = oImage.src.substring(0,oImage.src.length - 9) + this.padDigits(iScore,2) + "-" + this.padDigits(this.range(),2) + ".png"; } else{ oImage.src = oImage.src.substring(0,oImage.src.length - 9) + this.padDigits(iScore + 1,2) + "-" + this.padDigits(this.range(),2) + ".png"; } // Once the image has been set, we're done return; // Call the onUpdate event this.onUpdate(); } } }; // Error handling function - alerts on errors if bug reporting is on oElement.error = function(iImportance,sText){ if (this.getAttribute('optsDebugThreshold')) var iThreshold = this.getAttribute('optsDebugThreshold'); else iThreshold = 0; if (iImportance < iThreshold){ alert(sText); } } // Converts a number to a string with prepended zeros to the specified character length oElement.padDigits = function(iNumber,iDigits){ var sNumber = iNumber.toString(); var sTemp = ''; if (iDigits > sNumber.length){ for (var i = 0; i < (iDigits - sNumber.length); i++){ sTemp += '0'; } } return sTemp + sNumber; } // On Update event function, typicaly overriden oElement.onUpdate = function(){ } // Return the pips element for ease of refference return oElement; } // Converts all properly classed spans in the context to pips elements function dfrpg_jbteller4_convertPips(opts){ // Get all the spans in the context, whatever it may be if (opts['context']) var aSpans = opts['context'].getElementsByTagName('span'); else var aSpans = document.getElementsByTagName('span'); // Convert all the potential values in the context to pips var pTemp = {}; for (var i = 0; i < aSpans.length; i++){ if (aSpans[i].className.match(/pips/)){ pTemp = dfrpg_jbteller4_pips(aSpans[i],opts); pTemp.showPips(); } } } // Converts all the pips in the context back to thier basic values for saving function dfrpg_jbteller4_unconvertPips(opts) { // Get the working context if (opts['context']) var aSpans = opts['context'].getElementsByTagName('span'); else var aSpans = document.getElementsByTagName('span'); // Flip all the pips in the context back to values for(var i = 0; i < aSpans.length; i++){ if(aSpans[i].className.match(/pips/)){ aSpans[i].showValue(); } } } /////////////////////////////////////////////////// // List Interface Control ///////////////////////////// /////////////////////////////////////////////////// // Applies a bunch of list functionality to the specified element function dfrpg_jbteller4_list(oElement,opts){ // Store options oElement.setAttribute('optsContainerId',opts['containerId']); oElement.setAttribute('optsIsEditable',opts['isEditable']); oElement.setAttribute('optsDebugThreshold',opts['debugThreshold']); // Parses the number of columns the list has from its class name oElement.columns = function(){ // Get the column count from the element's class name var iColumns = this.className.match(/listColumns_[\d]+/)[0].substring(12); // Default if needed, and return if (isNaN(iColumns) || iColumns < 1){ this.error(1,"Invalid column count specification in List Element (Element Class: " + this.className + ")"); return 1; } else return iColumns; }; // Gets the list's list item template from the element based on class oElement.template = function(){ // The template is the first div in the list with the "template" class var aDivs = this.getElementsByTagName('div'); for (var i = 0; i < aDivs.length; i++){ if (aDivs[i].className.match(/template/)) return aDivs[i]; } // Create a semi-persistant default row template if needed if (!this.defaultTemplate){ this.defaultTemplate = document.createElement('div'); this.defaultTemplate.innerHTML = '<span class="dsf"></span>'; } // If we got here, there wasn't a template in the list, default and return this.error(1,"No template row found in List Element (Element Class: " + this.className + ")"); return this.defaultTemplate; }; // Gets an array of the fields in the template row oElement.fields = function(){ // This is easy assuming all the fields are span tags, and all the spans are fields return this.template().getElementsByTagName('span'); } // Gets an array of the rows in the list, excluding the template oElement.rows = function(){ // Initialize the list of rows var aRows = new Array(); // Getting the divs in the list the hard way to avoid nested divs making the cut var aElements = this.childNodes; var aDivs = new Array(); var iCounter = 0; for (var n = 0; n < aElements.length; n++){ if (aElements[n].tagName == 'DIV'){ aDivs[iCounter] = aElements[n]; iCounter++; } } // If we have multiple columns, then get the rows from inside each one if (this.columns() > 1){ var aTemp = new Array(); for (var x = 0; x < aDivs.length; x++){ if (!aDivs[x].className.match(/template/)){ aTemp = aDivs[x].getElementsByTagName('div'); for (var y = 0; y < aTemp.length; y++){ aRows[aRows.length] = aTemp[y]; } } } } // Otherwise just get them all from the main div else{ for (var i = 1; i < aDivs.length; i++){ aRows[aRows.length] = aDivs[i]; } } // Return the array of rows // This may have been dissacoiated by the splices, not sure yet return aRows; } // Generates a structure containing the list's data from the save object oElement.loadData = function(){ // Pattern match on the first field for simplicity's sake var iCounter = 0; var oData = {}; // Get the fields in order (doesn't allow missing fileds) var sClassPattern = this.fields()[0].className.match(/dsf_[\w\d]+/)[0].substring(4); while (dynamic_sheet_attrs[sClassPattern + this.padDigits(iCounter,2)] != undefined){ oData[iCounter] = new Array(); for (var i = 0; i < this.fields().length; i++){ oData[iCounter][i] = dynamic_sheet_attrs[this.fields()[i].className.match(/dsf_[\w\d]+/)[0].substring(4) + this.padDigits(iCounter,2)]; } iCounter++; } // Write the length oData.length = iCounter; // Write the completed data structure to the object this.data = oData; } // Generates a structure contianing the list's data form the list itself oElement.parseData = function(){ // Go through each row of each field and populate the structure var oData = {}; oData.length = 0; for (var i = 0; i < this.rows().length; i++){ oData[i] = new Array(); for (var n = 0; n < this.fields().length; n++){ oData[i][n] = this.rows()[i].getElementsByTagName('span')[n].innerHTML } oData.length = i + 1; } // Write the completed data structure to the object this.data = oData; } // Renders out the code for the list and puts it into the list element oElement.render = function(){ var sTemp = ''; var iCurrentColumn = 1; var iBreak = 0; var sClass = ''; // Add the first column opener if multiple columns, and calc first col break if (this.columns() > 1){ sTemp = '\n<div class="column column_spacing">'; iBreak += Math.floor(this.data.length / this.columns()) - 1; if (iCurrentColumn <= (this.data.length % this.columns())) iBreak++; } // Accumulate the list code for each row for (var i = 0; i < this.data.length; i++){ // Populate and class the fields for (var n = 0; n < this.fields().length; n++){ this.fields()[n].className = this.fields()[n].className.replace(/dsf_[\w\d]+/,this.fields()[n].className.match(/dsf_[\w\d]+/)[0] + this.padDigits(i,2)); this.fields()[n].innerHTML = this.data[i][n]; } // Add the list item to the code sTemp += this.template().innerHTML; // Reset the template if it was used for (var x = 0; x < this.fields().length; x++){ sClass = this.fields()[x].className.match(/dsf_[\w\d]+/)[0]; this.fields()[x].className = this.fields()[x].className.replace(/dsf_[\w\d]+/,sClass.substring(0,sClass.length - 2)); this.fields()[x].innerHTML = ''; } // Add column breaks where needed if (this.columns() > 1 && (i == iBreak)){ // Add the column opener for the last column if (iCurrentColumn == (this.columns() - 1)) sTemp += '</div>\n<div class="column">'; // Add the final column's column closer else if (i == (this.data.length - 1)) sTemp += '</div>'; // Add the column openers for other columns else sTemp += '</div>\n<div class="column column_spacing">'; // Update the column break and current column iCurrentColumn++; iBreak += Math.floor(this.data.length / this.columns()); if (iCurrentColumn <= (this.data.length % this.columns())) iBreak++; } } // Prepend the template to the list code sTemp = '<div class="template">' + this.template().innerHTML + '</div>' + sTemp; // Purge jquery expandos in explorer sTemp = sTemp.replace(/jQuery[\d]+="[\d]+"/g,''); // Put the code in the list this.innerHTML = sTemp; // Activate the interface if in edit mode if (this.getAttribute('optsIsEditable') == 'true'){ // Look through all the anchor elements in the list and activate by class name var aButtons = this.getElementsByTagName('a'); for (var y = 0; y < aButtons.length;y++){ if(aButtons[y].className.match(/listDelete/)) aButtons[y].onclick = this.deleteItem; else if(aButtons[y].className.match(/listPromote/)) aButtons[y].onclick = this.promoteItem; else if(aButtons[y].className.match(/listDemote/)) aButtons[y].onclick = this.demoteItem; } } // Hide them if not else{ // Look through all the anchor elements in the list and hide by class name var oContext = document.getElementById(this.getAttribute('optsContainerId')); if (oContext) var aButtons = oContext.getElementsByTagName('a'); else{ this.error(2,'No context specified in options for list element (Element Class: ' + this.className + ')'); var aButtons = document.getElementsByTagName('a'); } for (var y = 0; y < aButtons.length; y++){ if(aButtons[y].className.match(/interface/)) aButtons[y].style.display = 'none'; } } // Triger the list's onUpdate event this.onUpdate(); }; // Adds an blank element to the list oElement.addItem = function(){ // Get the latest data from the list this.parseData(); // Add a new row to the data, full of blank values var aRow = new Array(); for (var i = 0; i < this.fields().length; i++){ aRow[i] = ''; } this.data[this.data.length] = aRow; this.data.length++; // Re-render the list this.render(); }; // Deletes the specified element from the list oElement.deleteItem = function(){ // Activate the list the item belongs to var oItem = this.parentNode; if (oItem.parentNode.className.match(/list/)) var lList = oItem.parentNode; else var lList = oItem.parentNode.parentNode; // Stop here if we're editing things if (oItem.innerHTML.match(/input/)) return; // Delete the item from the DOM oItem.parentNode.removeChild(oItem); // Refresh the list to renew numbering lList.parseData(); lList.render(); }; // Moves the specified element up the list one place oElement.promoteItem = function(){ // Activate the list the item belongs to var oItem = this.parentNode; if (oItem.parentNode.className.match(/list/)) var lList = oItem.parentNode; else var lList = oItem.parentNode.parentNode; // Stop here if we're editing things if (oItem.innerHTML.match(/input/)) return; // Get the latest data from the list lList.parseData(); // Figure out what row number was clicked var sFieldClass = oItem.getElementsByTagName('span')[0].className.match(/dsf_[\w\d]+/)[0]; var sIndexString = sFieldClass.substring(sFieldClass.length - 2).replace(/^[0]+/,''); var iIndex = parseInt(sIndexString); // Stop right here if the clicked item is already at the top if (iIndex == 0) return; // Swap the row data with the one above it var aRowA = lList.data[iIndex]; var aRowB = lList.data[iIndex - 1]; lList.data[iIndex] = aRowB; lList.data[iIndex - 1] = aRowA; // Re-render the data lList.render(); }; // Moves the specified element down the list one place oElement.demoteItem = function(){ // Activate the list the item belongs to var oItem = this.parentNode; if (oItem.parentNode.className.match(/list/)) var lList = oItem.parentNode; else var lList = oItem.parentNode.parentNode; // Stop here if we're editing things if (oItem.innerHTML.match(/input/)) return; // Get the latest data from the list lList.parseData(); // Figure out what row number was clicked var sFieldClass = oItem.getElementsByTagName('span')[0].className.match(/dsf_[\w\d]+/)[0]; var sIndexString = sFieldClass.substring(sFieldClass.length - 2).replace(/^[0]+/,''); var iIndex = parseInt(sIndexString); // Stop right here if the clicked item is alreayd on the bottom if (iIndex == (lList.data.length - 1)) return; // Swap the row data with the one below it var aRowA = lList.data[iIndex]; var aRowB = lList.data[iIndex + 1]; lList.data[iIndex] = aRowB; lList.data[iIndex + 1] = aRowA; // Re-render the data lList.render(); }; // Error handling function - alerts on errors if bug reporting is on oElement.error = function(iImportance,sText){ if (this.getAttribute('optsDebugThreshold')) var iThreshold = this.getAttribute('optsDebugThreshold'); else iThreshold = 0; if (iImportance < iThreshold){ alert(sText); } } // Converts a number to a string with prepended zeros to the specified character length oElement.padDigits = function(iNumber,iDigits){ var sNumber = iNumber.toString(); var sTemp = ''; if (iDigits > sNumber.length){ for (var i = 0; i < (iDigits - sNumber.length); i++){ sTemp += '0'; } } return sTemp + sNumber; } // On Update event function, typicaly overriden oElement.onUpdate = function(){ } // Return the origenal element now that it's fully equipped return oElement; } // Converts all properly classed divs in the context to lists function dfrpg_jbteller4_convertLists(opts){ // Find all the divs on the page with "list" in their class name if (opts['context']) var aDivs = opts['context'].getElementsByTagName('div'); else var aDivs = document.getElementsByTagName('div'); var lTemp = {}; for (var i = 0; i < aDivs.length; i++){ if (aDivs[i].className.match(/list/)){ // Convert each element to a full featured list object lTemp = dfrpg_jbteller4_list(aDivs[i],opts); // Populate the list from the data variable lTemp.loadData(); lTemp.render(); // Assign the onUpdate function lTemp.onUpdate = function(){ dfrpg_jbteller4_convertPips(opts); aisleten.characters.bindAllFields(opts['slug'],opts['containerId']); //dst_devkit.bindDynamicAttributes(); } } } } /////////////////////////////////////////////////// // Check Interface Control /////////////////////////// /////////////////////////////////////////////////// // Applies a bunch of pips functionality to the specified element function dfrpg_jbteller4_check(oElement,opts){ // Store options oElement.setAttribute('optsImagePath',opts['imagePath']); oElement.setAttribute('optsIsEditable',opts['isEditable']); oElement.setAttribute('optsDebugThreshold',opts['debugThreshold']); // Gets the field value from the embedded image or the text oElement.value = function(){ // Get the value from the image if there is one if (this.getElementsByTagName('img').length){ var sPath = this.getElementsByTagName('img')[0].src; var sValue = sPath.substring(sPath.length - 5,sPath.length - 4); } // If there's no image, get the value from the text else{ var sValue = this.innerHTML; if (this.innerHTML == '') sValue = '0'; } // Check the value for bad data, default if needed, and return if (sValue != '1' && sValue != '0'){ this.error(1,"Invalid value for Check Element (Element Class: " + this.className + ")"); return 0; } else return sValue; }; // Converts the associated span element's contents to a pips image oElement.showCheck = function(){ // Get the image path from options or default if (this.getAttribute('optsImagePath')) var sPath = this.getAttribute('optsImagePath'); else{ this.error(2,'No imagePath specified in options for Checks element (Element Class: ' + this.className + ')'); sPath = 'dynamic_sheets/minimal4e/0.1/images/'; } // Replace the contents with the appropriate check image this.innerHTML = '<img src="' + sPath + 'check-' + this.value() + '.png" />'; // Activate the check this.activate(); }; // Converts the associated span element's contents to a text value oElement.showValue = function(){ // Replace the contents with the appropriate value string this.innerHTML = this.value(); }; // Assigns clickability to a pips image element oElement.activate = function(){ // Don't actualy activate anything if we're not in edit mode if (this.getAttribute('optsIsEditable') != 'true') return; // Activate the element's pips interface this.onclick = this.click; // Set the element's alt text this.title = 'Click to set value'; // Set the cursor for the item this.style.cursor = 'pointer'; }; // Click event handler for the pips interface oElement.click = function(){ // Get the pips image that was clicked as a pips object var oImage = this.getElementsByTagName('img')[0]; // Determine which pip the click was on and change the image if (this.value() == "1") oImage.src = oImage.src.substring(0,oImage.src.length - 5) + "0.png"; else oImage.src = oImage.src.substring(0,oImage.src.length - 5) + "1.png"; // Call the onUpdate event this.onUpdate(); }; // Error handling function - alerts on errors if bug reporting is on oElement.error = function(iImportance,sText){ if (this.getAttribute('optsDebugThreshold')) var iThreshold = this.getAttribute('optsDebugThreshold'); else iThreshold = 0; if (iImportance < iThreshold){ alert(sText); } } // On Update event function, typicaly overriden oElement.onUpdate = function(){ } // Return the pips element for ease of refference return oElement; } // Converts all properly classed spans in the context to pips elements function dfrpg_jbteller4_convertChecks(opts){ // Get all the spans in the context, whatever it may be if (opts['context']) var aSpans = opts['context'].getElementsByTagName('span'); else var aSpans = document.getElementsByTagName('span'); // Convert all the potential values in the context to pips var pTemp = {}; for (var i = 0; i < aSpans.length; i++){ if (aSpans[i].className.match(/check/)){ pTemp = dfrpg_jbteller4_check(aSpans[i],opts); pTemp.showCheck(); } } } // Converts all the pips in the context back to thier basic values for saving function dfrpg_jbteller4_unconvertChecks(opts) { // Get the working context if (opts['context']) var aSpans = opts['context'].getElementsByTagName('span'); else var aSpans = document.getElementsByTagName('span'); // Flip all the pips in the context back to values for(var i = 0; i < aSpans.length; i++){ if(aSpans[i].className.match(/check/)){ aSpans[i].showValue(); } } } /////////////////////////////////////////////////// // General Utility Functions ////////////////////////// /////////////////////////////////////////////////// // Gets an array of elements with a particular class from the context function dfrpg_jbteller4_getElementsByClassName(sClassName,sElementType){ // Provide default element type if (!sElementType) sElementType = 'div'; var aList = new Array(); var aDivs = dfrpg_jbteller4_context.getElementsByTagName(sElementType); for (var i = 0; i < aDivs.length; i++){ if (aDivs[i].className.match(sClassName)) aList[aList.length] = aDivs[i]; } return aList; } // Tab switching function function dfrpg_jbteller4_tabClick(oTab,sPageClass){ // Abort if already on the selected tab var oPage = dfrpg_jbteller4_getElementsByClassName('page_' + sPageClass)[0]; if (oPage.style.display != 'none') return; // Set the length of the shorter page to match the longer page var oPages = dfrpg_jbteller4_getElementsByClassName('main'); var iHeight = 0; for (var i = 0; i < oPages.length; i++){ if (oPages[i].offsetHeight > iHeight) iHeight = oPages[i].offsetHeight; } for (var n = 0; n < oPages.length; n++){ oPages[n].style.minHeight = (iHeight - 140) + 'px'; } // Corelate the 'type' fields on the two pages var aTypes = dfrpg_jbteller4_getElementsByClassName('dsf_type','span'); if (sPageClass == 'sheet'){ aTypes[0].innerHTML = aTypes[1].innerHTML; } else{ aTypes[1].innerHTML = aTypes[0].innerHTML; } // Show the proper pages and tabs if (sPageClass == 'sheet'){ oTab.parentNode.style.backgroundImage = "url(http://omnichron.net/external/op/dst_exalted/dynamic_sheets/exalted/0.1/images/brass-tab-left.png)"; dfrpg_jbteller4_getElementsByClassName('page_sheet')[0].style.display = 'block'; dfrpg_jbteller4_getElementsByClassName('page_bio')[0].style.display = 'none'; } else{ oTab.parentNode.style.backgroundImage = "url(http://omnichron.net/external/op/dst_exalted/dynamic_sheets/exalted/0.1/images/brass-tab-right.png)"; dfrpg_jbteller4_getElementsByClassName('page_bio')[0].style.display = 'block'; dfrpg_jbteller4_getElementsByClassName('page_sheet')[0].style.display = 'none'; } }
Submit Notes
Back
I'm sorry, but we no longer support this web browser. Please
upgrade your browser
or install
Chrome
or
Firefox
to enjoy the full functionality of this site.