Obsidian Portal - Campaign websites for Dungeons and Dragons and other tabletop RPGs

Pendragon Knight

Author: markspace

Slug: pendragon

System: Pendragon

DST Source Code

HTML Template

          <div class="content">
            <div class="pendragon_p1">
              <div class="pendragon_c1">
                <div class="pendragon_title">
                  <span class="pendragon_mast">Pendragon</span>
                </div>
                <div class="player">
                  <span class="pendragon_title">Player:</span>
                  <span class="dsf dsf_player"></span>
                </div>
                <div class="pendragon_personal_data pendragon_kvt">
                  <span class="pendragon_header">Personal Data</span>
                  <div>Name <span class="dsf dsf_name"></span></div>
                  <div>Age <span class="dsf dsf_age"></span></div>
                  <div>Son Number <span class="dsf dsf_son_number"></span></div>
                  <div>Homeland <span class="dsf dsf_homeland"></span></div>
                  <div>Culture <span class="dsf dsf_culture"></span></div>
                  <div>Religion <span class="dsf dsf_religion"></span></div>
                  <div>Lord <span class="dsf dsf_lord"></span></div>
                  <div>Current Class <span class="dsf dsf_current_class"></span></div>
                  <div>Current Home <span class="dsf dsf_current_home"></span></div>
                </div>
                <div class="pendragon_personality_traits pendragon_kv">
                  <span class="pendragon_header">Personality Traits</span>
                  <div>Chivalry Bonus <span class="dsf dsf_chivalry_bonus"></span></div>
                  <div>Religious Bonus <span class="dsf dsf_religious_bonus"></span></div>
                  <table class="pendragon_traits">
                  <tr> 
                    <th>Chaste</th><td><span class="dsf dsf_trait_chaste"></span></td>
                    <td>/</td><td><span class="dsf dsf_trait_lustful"></span></td><th>Lustful</th>
                  </tr>
                  <tr>
                    <th>Energetic</th><td><span class="dsf dsf_trait_energetic"></span></td>
                    <td>/</td><td><span class="dsf dsf_trait_lazy"></span></td><th>Lazy</th>
                  </tr>
                  <tr>
                    <th>Forgiving</th><td><span class="dsf dsf_trait_forgiving"></span></td>
                    <td>/</td><td><span class="dsf dsf_trait_vengeful"></span></td><th>Vengeful</th>
                  </tr>
                  <tr>
                    <th>Generous</th><td><span class="dsf dsf_trait_generous"></span></td>
                    <td>/</td><td><span class="dsf dsf_trait_selfish"></span></td><th>Selfish</th>
                  </tr>
                  <tr>
                    <th>Honest</th><td><span class="dsf dsf_trait_honest"></span></td>
                    <td>/</td><td><span class="dsf dsf_trait_deceitful"></span></td><th>Deceitful</th>
                  </tr>
                  <tr>
                    <th>Just</th><td><span class="dsf dsf_trait_just"></span></td>
                    <td>/</td><td><span class="dsf dsf_trait_arbitrary"></span></td><th>Arbitrary</th>
                  </tr>
                  <tr>
                    <th>Merciful</th><td><span class="dsf dsf_trait_merciful"></span></td>
                    <td>/</td><td><span class="dsf dsf_trait_cruel"></span></td><th>Cruel</th>
                  </tr>
                  <tr>
                    <th>Modest</th><td><span class="dsf dsf_trait_modest"></span></td>
                    <td>/</td><td><span class="dsf dsf_trait_proud"></span></td><th>Proud</th>
                  </tr>
                  <tr>
                    <th>Pious</th><td><span class="dsf dsf_trait_pious"></span></td>
                    <td>/</td><td><span class="dsf dsf_trait_worldly"></span></td><th>Worldly</th>
                  </tr>
                  <tr>
                    <th>Prudent</th><td><span class="dsf dsf_trait_prudent"></span></td>
                    <td>/</td><td><span class="dsf dsf_trait_reckless"></span></td><th>Reckless</th>
                  </tr>
                  <tr>
                    <th>Temperate</th><td><span class="dsf dsf_trait_temperate"></span></td>
                    <td>/</td><td><span class="dsf dsf_trait_indulgent"></span></td><th>Indulgent</th>
                  </tr>
                  <tr>
                    <th>Trusting</th><td><span class="dsf dsf_trait_trusting"></span></td>
                    <td>/</td><td><span class="dsf dsf_trait_suspicious"></span></td><th>Suspicious</th>
                  </tr>
                  <tr>
                    <th>Valorous</th><td><span class="dsf dsf_trait_valorous"></span></td>
                    <td>/</td><td><span class="dsf dsf_trait_cowardly"></span></td><th>Cowardly</th>
                  </tr>
                  </table>
                  <div>Directed Trait <span class="dsf dsf_directed_trait1"></span></div>
                  <div>Directed Trait <span class="dsf dsf_directed_trait2"></span></div>
                </div>
                <div class="pendragon_passions pendragon_kv">
                  <span class="pendragon_header">Passions</span>
                  <div>Loyalty Lord <span class="dsf dsf_passion_loyalty_lord"></span></div>
                  <div>Love Family <span class="dsf dsf_passion_love_family"></span></div>
                  <div>Hospitality <span class="dsf dsf_passion_hospitality"></span></div>
                  <div>Honor <span class="dsf dsf_passion_honor"></span></div>
                  <div><span class="pendragon_custom dsf dsf_passion1_name"> </span><span class="dsf dsf_passion1"></span></div>
                  <div><span class="pendragon_custom dsf dsf_passion2_name"> </span><span class="dsf dsf_passion2"></span></div>
                  <div><span class="pendragon_custom dsf dsf_passion3_name"> </span><span class="dsf dsf_passion3"></span></div>
                  <div><span class="pendragon_custom dsf dsf_passion4_name"> </span><span class="dsf dsf_passion4"></span></div>
                </div>
                <div class="pendragon_equipment pendragon_kv">
                  <span class="pendragon_header">Equipment Carried</span>
                  <span class="pendragon_area readonly dsf dsf_equipment_carried"></span>
                </div>
              </div>
              <div class="pendragon_c2">
                <div class="pendragon_statistics pendragon_kv">
                  <span class="pendragon_header">Statistics</span>
                  <div>SIZ <span class="dsf dsf_siz"></span></div>
                  <div>DEX <span class="dsf dsf_dex"></span></div>
                  <div>STR <span class="dsf dsf_str"></span></div>
                  <div>CON <span class="dsf dsf_con"></span></div>
                  <div>APP <span class="dsf dsf_app"></span></div>
                  <div>Damage <span class="dsf dsf_damage readonly"></span></div>
                  <div>Healing Rate <span class="dsf dsf_healing_rate readonly"></span></div>
                  <div>Movement Rate <span class="dsf dsf_movement_rate readonly"></span></div>
                  <div>Total Hit Points <span class="dsf dsf_total_hp readonly"></span></div>
                  <div>Unconscious <span class="dsf dsf_unconscious readonly"></span></div>
                </div>
                <div class="pendragon_distinctive_features">
                  <span class="pendragon_header">Distinctive Features</span>
                  <span class="pendragon_area readonly dsf dsf_distinctive_features"></span>
                </div>
                <div class="pendragon_skills pendragon_kv">
                  <span class="pendragon_header">Skills</span>
                  <div>Awareness <span class="dsf dsf_skill_awareness"></span></div>
                  <div>Boating <span class="dsf dsf_skill_boating"></span></div>
                  <div>Compose <span class="dsf dsf_skill_compose"></span></div>
                  <div>Courtesy <span class="dsf dsf_skill_courtesy"></span></div>
                  <div>Dancing <span class="dsf dsf_skill_dancing"></span></div>
                  <div>Faerie Lore <span class="dsf dsf_skill_faerie_lore"></span></div>
                  <div>Falconry <span class="dsf dsf_skill_falconry"></span></div>
                  <div>First Aid <span class="dsf dsf_skill_first_aid"></span></div>
                  <div>Flirting <span class="dsf dsf_skill_flirting"></span></div>
                  <div>Folklore <span class="dsf dsf_skill_folklore"></span></div>
                  <div>Gaming <span class="dsf dsf_skill_gaming"></span></div>
                  <div>Heraldry <span class="dsf dsf_skill_heraldry"></span></div>
                  <div>Hunting <span class="dsf dsf_skill_hunting"></span></div>
                  <div>Intrigue <span class="dsf dsf_skill_intrigue"></span></div>
                  <div>Orate <span class="dsf dsf_skill_orate"></span></div>
                  <div><span class="pendragon_custom dsf dsf_skill_play1_name"></span> <span class="dsf dsf_skill_play1"></span></div>
                  <div><span class="pendragon_custom dsf dsf_skill_read1_name"></span> <span class="dsf dsf_skill_read1"></span></div>
                  <div>Recognize <span class="dsf dsf_skill_recognize"></span></div>
                  <div><span class="pendragon_custom dsf dsf_skill_religion1_name"></span> <span class="dsf dsf_skill_religion1"></span></div>
                  <div>Romance <span class="dsf dsf_skill_romance"></span></div>
                  <div>Singing <span class="dsf dsf_skill_singing"></span></div>
                  <div>Stewardship <span class="dsf dsf_skill_stewardship"></span></div>
                  <div>Swimming <span class="dsf dsf_skill_swimming"></span></div>
                  <div>Tourney <span class="dsf dsf_skill_tourney"></span></div>
                  <div><span class="pendragon_custom dsf dsf_skill_extra1_name"></span> <span class="dsf dsf_skill_extra1"></span></div>
                  <div><span class="pendragon_custom dsf dsf_skill_extra2_name"></span> <span class="dsf dsf_skill_extra2"></span></div>
                  <div><span class="pendragon_custom dsf dsf_skill_extra3_name"></span> <span class="dsf dsf_skill_extra3"></span></div>
                  <div><span class="pendragon_custom dsf dsf_skill_extra4_name"></span> <span class="dsf dsf_skill_extra4"></span></div>
                </div>
                <div class="pendragon_squire pendragon_kv">
                  <span class="pendragon_header">Squire</span>
                  <div>Name <span class="dsf dsf_squire_name"></span></div>
                  <div>Age <span class="dsf dsf_squire_age"></span></div>
                  <div>First Aid <span class="dsf dsf_squire_first_aid"></span></div>
                  <div>Battle <span class="dsf dsf_squire_battle"></span></div>
                  <div>Horsemanship <span class="dsf dsf_squire_horsemanship"></span></div>
                  <div><span class="pendragon_custom dsf dsf_squire_skill1_name"></span> <span class="dsf dsf_squire_skill1"></span></div>
                  <div><span class="pendragon_custom dsf dsf_squire_skill2_name"></span> <span class="dsf dsf_squire_skill2"></span></div>
                </div>
              </div>
              <div class="pendragon_c3">
                <div class="pendragon_shield">
                </div>
                <div class="pendragon_glory pendragon_kv">
                  <span class="pendragon_header">Glory</span>
                  <div>This Game <span class="dsf dsf_glory_this_game"> </span></div>
                  <div>Total <span class="dsf dsf_glory"> </span></div>
                </div>
                <div class="pendragon_current_hp pendragon_kv">
                  <span class="pendragon_header">Current HP</span>
                  <div>HP <span class="dsf dsf_current_hp"></span></div>
                  <div>Wounds <span class="pendragon_area readonly dsf dsf_wounds"></span></div>
                  <div>
                    <span>Chiurgery Needed</span>
                    <span class="dsf dsf_chiurgery_needed checkbox"></span>
                  </div>
                </div>
                <div class="pendragon_combat_skills pendragon_kv">
                  <span class="pendragon_header">Combat Skills</span>
                  <div>Battle <span class="dsf dsf_combat_battle"></span></div>
                  <div>Horsemanship <span class="dsf dsf_combat_horsemanship"></span></div>
                  <div>Sword <span class="dsf dsf_combat_sword"></span></div>
                  <div>Lance <span class="dsf dsf_combat_lance"></span></div>
                  <div>Spear <span class="dsf dsf_combat_spear"></span></div>
                  <div>Dagger <span class="dsf dsf_combat_dagger"></span></div>
                  <div><span class="pendragon_custom dsf dsf_combat_extra1_name"></span> <span class="dsf dsf_combat_extra1"></span></div>
                  <div><span class="pendragon_custom dsf dsf_combat_extra2_name"></span> <span class="dsf dsf_combat_extra2"></span></div>
                  <div><span class="pendragon_custom dsf dsf_combat_extra3_name"></span> <span class="dsf dsf_combat_extra3"></span></div>
                  <div><span class="pendragon_custom dsf dsf_combat_extra4_name"></span> <span class="dsf dsf_combat_extra4"></span></div>
                  <div><span class="pendragon_custom dsf dsf_combat_extra5_name"></span> <span class="dsf dsf_combat_extra5"></span></div>
                  <div><span class="pendragon_custom dsf dsf_combat_extra6_name"></span> <span class="dsf dsf_combat_extra6"></span></div>
                </div>
                <div class="pendragon_joust_score pendragon_kv">
                  <span class="pendragon_header">Joust Score</span>
                  <div>Wins <span class="dsf dsf_joust_wins"></span></div>
                  <div>Losses <span class="dsf dsf_joust_losses"></span></div>
                </div>
                <div class="pendragon_horses pendragon_kv">
                  <span class="pendragon_header">Horses</span>
                  <div>Best Warhorse</div>
                  <div>Type <span class="dsf dsf_horse1_type"></span></div>
                  <div>Damage <span class="dsf dsf_horse1_damage"></span></div>
                  <div>Move <span class="dsf dsf_horse1_move"></span></div>
                  <div>Armor <span class="dsf dsf_horse1_armor"></span></div>
                  <div>HP <span class="dsf dsf_horse1_hp"></span></div>
                  <div>SIZ <span class="dsf dsf_horse1_siz"></span></div>
                  <div>CON <span class="dsf dsf_horse1_con"></span></div>
                  <div>DEX <span class="dsf dsf_horse1_dex"></span></div>
                  <div>Attack <span class="dsf dsf_horse1_attack"></span></div>
                  <div>Breed <span class="dsf dsf_horse1_breed"></span></div>
                  <div>Riding <span class="dsf dsf_horse2_type"></span></div>
                  <div>Move <span class="dsf dsf_horse2_move"></span></div>
                  <div>Squire's <span class="dsf dsf_horse3_type"></span></div>
                  <div>Move <span class="dsf dsf_horse3_move"></span></div>
                  <div>#4 <span class="dsf dsf_horse4_type"></span></div>
                  <div>Move <span class="dsf dsf_horse4_move"></span></div>
                  <div>#5 <span class="dsf dsf_horse5_type"></span></div>
                  <div>Move <span class="dsf dsf_horse5_move"></span></div>
                </div>
              </div>
            </div>
            <div class="pendragon_page_marker">
              <hr />
            </div>
            <div class="pendragon_p2">
              <div>
                  <span class="pendragon_header">Family History and Events</span>
                  <div><span class="pendragon_area readonly dsf dsf_family_history"></span></div>
              </div>
              <div>
                  <span class="pendragon_header">Equipment</span>
                  <div><span class="pendragon_area readonly dsf dsf_equipment"></span></div>
              </div>
              <div>
                  <span class="pendragon_header">Holdings</span>
                  <div><span class="pendragon_area readonly dsf dsf_holdings"></span></div>
              </div>
              <div>
                  <span class="pendragon_header">Annual Glory Rewards</span>
                  <div><span class="pendragon_area readonly dsf dsf_annual_glory_rewards"></span></div>
              </div>
              <div>
                  <span class="pendragon_header">Character History</span>
                  <div><span class="dsf dsf_bio"></span></div>
              </div>
            </div>


          </div>

CSS

/****************************
* This is the CSS for the pendragon
*****************************/

@media print {
    body * {
            visibility: hidden;
    }
    div.dynamic_sheet_container * {
            visibility: visible;
    }
    div.dynamic_sheet_container {
            position: absolute;
            left: 0;
            top: 0;
    }
    .ds_pendragon
    {
        width: 700px;
        font-family: "Times New Roman", Times, serif;
        font-size:14pt;
        line-height:normal;
    }

}

@media screen {
    .ds_pendragon
    {
        width: 700px;
        font-family: "Times New Roman", Times, serif;
        font-size:14pt;
        line-height:normal;
    }
}

.ds_pendragon .jeditable_input{
    right:-2px;
    top:-1px;
    height:14px;
}

.ds_pendragon input {
    padding:0px 0px 0px 0px;
    margin:-1px 0px 0px -1px;
}

div.editable .dsf {
    cursor:pointer;
}

div.editable .dsf:hover {
    color:#456d67;
}

div.editable .dsf_bio:hover {
    color:#456d67;
    cursor:text;
}

div.editable .area:hover{
    color:#456d67;
}




.ds_pendragon .pendragon_mast
{
    width: 100%;
    font-size: 300%;
    font-weight: bold;
    color: black;
    text-align: left;
    margin-bottom: .25em;
}

.ds_pendragon .pendragon_p1
{
    border-width: 1px;
    border-style: solid;
    border-color: black;
    overflow: auto;
    padding-bottom: .5em;
    margin-bottom: 6px;
    clear: left;
}

.ds_pendragon .pendragon_p2
{
    border-width: 1px;
    border-style: solid;
    border-color: black;
    overflow: auto;
    padding-bottom: .5em;
    margin-bottom: 6px;
    clear: left;
}

/* Columns */
.ds_pendragon .pendragon_p1 .pendragon_c1
{
    width: 265px;
    margin-right: 10px; 
    float: left;
}

.ds_pendragon .pendragon_p1 .pendragon_c2
{
    width: 205px;
    margin-right: 10px; 
    float: left;
}

.ds_pendragon .pendragon_p1 .pendragon_c3
{
    width: 205px;
    float: left;
}

.ds_pendragon .pendragon_title
{
    font-weight: bold;
    clear: left;
}

.ds_pendragon .pendragon_header
{
    width: 100%;
    font-size: 110%;
    font-weight: bold;
    background-color: #E8E8E8;
    color: black;
    float: left;
    text-align: center;
    margin-bottom: .25em;
}


.ds_pendragon .pendragon_hidden
{
    display: none;
    visibility: hidden;
}

@media screen {
    .ds_pendragon .pendragon_page_marker {
        margin-top: 1em;
        margin-bottom: 1em;
    }
}
@media print {
    .ds_pendragon .pendragon_page_marker {
        page-break-after:always;
    }
}

.ds_pendragon .pendragon_shield {
    min-height: 150px;
}

.ds_pendragon .pendragon_kvt div>span:last-of-type {
    min-width: 50%;
    margin-left: .5em;
    font-weight: bold;
    float:right;
    text-align:left;
    display:inline-block;
}

.ds_pendragon .pendragon_kv div>span:last-of-type {
    min-width: 20%;
    margin-left: .5em;
    font-weight: bold;
    float:right;
    text-align:right;
    display:inline-block;
}
.ds_pendragon .pendragon_kv div {
    clear: right;
}

.ds_pendragon .pendragon_kv .pendragon_custom {
    min-width: 70%;
    font-weight: normal;
    display:inline-block;
}

.ds_pendragon .pendragon_kv>div, 
.ds_pendragon .pendragon_kvt>div, 
.ds_pendragon .pendragon_traits th, 
.ds_pendragon .pendragon_traits td {
    font-family: "Times New Roman", Times, serif;
    font-size:14pt;
    line-height:normal;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-bottom-color: #E0E0E0;
    padding: 0;
    vertical-align: baseline;
    min-height: 16pt;
}


.ds_pendragon .pendragon_personality_traits div>span:last-of-type {
    min-width: 45%;
}
.ds_pendragon .pendragon_traits {
    width: 100%;
}
.ds_pendragon .pendragon_traits td span {
    min-width: 2ex;
    text-align: right;
    display:inline-block;
    font-weight: bold;
}
.ds_pendragon .pendragon_traits tr th {
    font-family: "Times New Roman", Times, serif;
    font-size:14pt;
    line-height:normal;
    background: #FFFFFF;
    padding: 0;
    vertical-align: baseline;
    font-weight: normal;
}
.ds_pendragon .pendragon_traits tr th:first-of-type {
    text-align: left;
}
.ds_pendragon .pendragon_traits tr th:last-of-type {
    text-align: right;
}


.ds_pendragon .pendragon_area
{
    float: left;
    position:relative;
    display:inline-block;
    text-align:left;
    width: 100%;
    color:inherit;
}

Javascript

/*
* This is the javascript specific to the pendragon DST 
* by Mark Davidson
*
* Lots of ideas from Langy and ChainsawXIV
*/

// Global Storage
pendragon_context = {};
var $ = jQuery

var pendragon_default_values = {


  "passion_loyalty_lord" : "15",
  "passion_love_family" : "15",
  "passion_hospitality" : "15",
  "passion_honor" : "15",

  "equipment_carried" : "Armour XX points",

  "skill_awareness" : "5",
  "skill_boating" : "1",
  "skill_compose" : "1",
  "skill_courtesy" : "3",
  "skill_dancing" : "2",
  "skill_faerie_lore" : "1",
  "skill_falconry" : "3",
  "skill_first_aid" : "10",
  "skill_flirting" : "3",
  "skill_folklore" : "2",
  "skill_gaming" : "3",
  "skill_heraldry" : "3",
  "skill_hunting" : "2",
  "skill_intrigue" : "3",
  "skill_orate" : "3",
  "skill_play1_name" : "Play __",
  "skill_play1" : "3",
  "skill_read1_name" : "Read __",
  "skill_read1" : "0",
  "skill_recognize" : "3",
  "skill_religion1_name" : "Religion (__)",
  "skill_religion1" : "2",
  "skill_romance" : "2",
  "skill_singing" : "2",
  "skill_stewardship" : "2",
  "skill_swimming" : "2",
  "skill_tourney" : "2",

  "glory_this_game" : "",
  "glory" : "0",

  "combat_battle" : "10",
  "combat_horsemanship" : "10",
  "combat_sword" : "10",
  "combat_lance" : "10",
  "combat_spear" : "6",
  "combat_dagger" : "5",

  "squire_first_aid" : "6",
  "squire_battle" : "1",
  "squire_horsemanship" : "6",
};

function pendragon_dataPreLoad(opts) {
    $.fn.editable.defaults['onblur'] = 'submit';

    aisleten.characters.jeditablePlaceholder = "__";
    aisleten.characters.jeditableSubmit = '';

    // Called just before the data is loaded.
    var tempData = {};
    for (var val in pendragon_default_values)
    {
        tempData[val] = pendragon_default_values[val];
    }
    for (var val in dynamic_sheet_attrs)
    {
        tempData[val] = dynamic_sheet_attrs[val];
    }

    dynamic_sheet_attrs = tempData;
}

function pendragon_dataPostLoad(opts) {

    var containerId = "#" + opts['containerId'];
    pendragon_context = document.getElementById(opts['containerId']);
    opts['context'] = document.getElementById(opts['containerId']);

    //Convert interface elements
    pendragon_convertAreas(opts);


    // Modify the image attributes so that it is scaled to fit inside
    // the pre-allocated space on the character sheet
    var avatarImgActual = '.avatar_image';
    var avatarImg = jQuery(avatarImgActual);
    var width = avatarImg.width();
    var height = avatarImg.height();
    if (width > height) {
        jQuery(avatarImgActual).css("width", "100%");
    } else {
        jQuery(avatarImgActual).css("height", "100%");
    }
    pendragon_derivedStats();
}

function pendragon_dataChange(opts) {

    pendragon_derivedStats();

}

function pendragon_dataPreSave(opts) {
    opts['context'] = document.getElementById(opts['containerId']);
    pendragon_unconvertAreas(opts);
    var containerId = "#" + opts['containerId'];
}

function pendragon_derivedStats() {
    var size = pendragon_getInt(jQuery('.dsf_siz').html());
    var dexterity = pendragon_getInt(jQuery('.dsf_dex').html());
    var strength = pendragon_getInt(jQuery('.dsf_str').html());
    var constitution = pendragon_getInt(jQuery('.dsf_con').html());
    var appearance = pendragon_getInt(jQuery('.dsf_app').html());

    var damage = Math.round((strength+size)/6);
    jQuery('.dsf_damage').html(damage+'D6');
    var healing_rate = Math.round((strength+constitution)/10);
    jQuery('.dsf_healing_rate').html(healing_rate);
    var movement_rate = Math.round((strength+dexterity)/10);
    jQuery('.dsf_movement_rate').html(movement_rate);
    var total_hp = size+constitution;
    jQuery('.dsf_total_hp').html(total_hp);
    var unconscious = Math.round(total_hp/4);
    jQuery('.dsf_unconscious').html(unconscious);

}

function pendragon_getInt(val) {
    var score = parseInt(val);
    if (isNaN(score)) score = 0;
    return score;
}

function pendragon_area(oElement,opts){

    // Store opts
    oElement.setAttribute('optsIsEditable',opts['isEditable']);
    oElement.setAttribute('optsDebugThreshold',opts['debugThreshold']);

    // Attaches edit events to area text
    oElement.activate = function(){

        // Don't activate the element if we're not in edit mode
        if (this.getAttribute('optsIsEditable') != 'true') return;

        // Activate the element
        oElement.onclick = this.edit;

        // Add default value
        if (this.innerHTML == '') this.innerHTML = aisleten.characters.jeditablePlaceholder;

        // Set the element's alt text
        this.title = 'Edit';

        // Set the cursor for the item
        this.style.cursor = 'pointer';

    };

    // Converts the element to an editable area
    oElement.edit = function(){

        // Abort click function if we just clicked submit
        if(this.getAttribute('eventLock') == 'locked'){
            this.setAttribute('eventLock',null);
            return;
        }

        // Force submit any other area in the context
        var aAreas = pendragon_getElementsByClassName('area','span');
        for (var i = 0; i < aAreas.length; i++){
            if (aAreas[i].getAttribute('status') == 'editing') aAreas[i].submit();
        }

        // Set the editing flag
        this.setAttribute('status','editing');

        // Disable click functionality
        this.onclick = null;

        // Set cursor
        this.style.cursor = 'text';

        // Remove default
        if (this.innerHTML == aisleten.characters.jeditablePlaceholder) this.innerHTML = '';

        // Convert <br /> tags to line breaks
        var sText = this.innerHTML.replace(/<br>/g,'\n');

        // Select dimensions and classes
        var iWidth = this.offsetWidth + parseInt(this.getAttribute('widthMod'));
        var iHeight = this.offsetHeight + parseInt(this.getAttribute('heightMod')) + 60;
        var sClasses = this.getAttribute('areaClasses');

        // Convert content into form with button
        this.innerHTML = '<textarea class=pendragon_textarea "' + sClasses + '" style="width:' + iWidth + 'px;height:' + iHeight + 'px;">' + sText + '</textarea>';

        var focusRef = function(){$('.pendragon_textarea').focus();};
        var submitRef = function(){$('.pendragon_textarea').parent().submit();};
        var unfocusRef = function(){$('.pendragon_textarea').blur(submitRef)};

        this.focusTimeout = setTimeout(focusRef,50);
        this.unfocusTimeout = setTimeout(unfocusRef,60);
    };

    // Converts the edit box back into regular text form
    oElement.submit = function(){

        // Get the data from the edit box
        var sContent = this.getElementsByTagName('textarea')[0].value.replace(/\n/g,'<br>');

        // Remove the form elements
        this.innerHTML = sContent;

        // Reapply the default value if needed
        if (this.innerHTML == '') this.innerHTML = aisleten.characters.jeditablePlaceholder;

        // Lock out the click event until we're done
        this.setAttribute('eventLock','locked');

        // Automatically unlock after a twentieth of a second
        var submitRef = function(){oElement.setAttribute('eventLock',null);};
        this.timeout = setTimeout(submitRef,50);

        // Set pointer
        this.style.cursor = 'pointer';

        // Reattach the click functionality
        this.onclick = this.edit;

        // Reset the editing flag
        this.setAttribute('status',null);

        // Call the onUpdate event
        this.onUpdate();

    };

    // On Update event function, typicaly overriden
    oElement.onUpdate = function(){

    }

    // Error handling function - alerts on errors if bug reporting is on
    oElement.error = function(iImportance,sText){
        if (this.getAttribute('optsDebugThreshold')) var iThreshold = this.getAttribute('debugThreshold');
        else iThreshold = 0;
        if (iImportance < iThreshold){
            alert(sText);
        }
    }

    // Return the element for ease of refference
    return oElement;

}

// Converts all properly classed divs in the context to areas
function pendragon_convertAreas(opts){

    // Find all the spans on the page with "area" in their class name
    if (opts['context']) var aSpans = opts['context'].getElementsByTagName('span');
    else var aSpans = document.getElementsByTagName('span');

    var taTemp = {};
    for (var i = 0; i < aSpans.length; i++){
        if (aSpans[i].className.match(/area/)){

            // Convert each element to a full featured area object
            taTemp = pendragon_area(aSpans[i],opts);
            taTemp.activate();

            // Load up custom parameters and such depending on class
            if (aSpans[i].className.match('is_tooltip')){
                taTemp.setAttribute('widthMod',-9);
                taTemp.setAttribute('heightMod',-9);
                taTemp.setAttribute('areaClasses','area tip_area');
                taTemp.onUpdate = function(){
                    oParent = this.parentNode;
                    oParent.setAttribute("editLock","unlocked");
                    oParent.mouseOut();
                };
            }
            else{
                taTemp.setAttribute('widthMod',-23);
                taTemp.setAttribute('heightMod',-6);
                taTemp.setAttribute('areaClasses','area');
            }

        }
    }

}

// Sets the necesary class name on areas for them to be saved
function pendragon_unconvertAreas(opts){

    // Find all the spans on the page with "area" in their class name
    if (opts['context']) var aSpans = opts['context'].getElementsByTagName('span');
    else var aSpans = document.getElementsByTagName('span');

    // Add the necesary save key to the class name
    // Also close out any active edit boxes
    for (var i = 0; i < aSpans.length; i++){
        if (aSpans[i].className.match(/area/)){
            //if (aSpans[i].innerHTML.match(/textarea/)) aSpans[i].submit();
            if (aSpans[i].innerHTML == aisleten.characters.jeditablePlaceholder) aSpans[i].innerHTML = '';
        }
    }
}


////////////////////////////////////////////////////////
// General Utility Functions :: Credit to ChainsawXIV //
////////////////////////////////////////////////////////

// Gets an array of elements with a particular class from the context
function pendragon_getElementsByClassName(sClassName,sElementType){

    // Provide default element type
    if (!sElementType) sElementType = 'div';

    var aList = new Array();
    var aDivs = pendragon_context.getElementsByTagName(sElementType);
    for (var i = 0; i < aDivs.length; i++){
        if (aDivs[i].className.match(sClassName)) aList[aList.length] = aDivs[i];
    }
    return aList;

}

Back

Pendragon Knight

Create Your Campaign

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.

Pendragon Knight

Create Your Campaign

Just One More Step

Just A Little More Info

Use a Social Account

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.