MediaWiki:Gadget-SkillForm.js

RLQ.push(function () {
  $(document).ready(function() {
    var skillforms = $('.skillform');
    if (skillforms.length > 0) {
      skillforms.each(function(idx, element) {
        initButtons($(element).find('.tabButtonLane'), function(tabs) {
          initSkillForm(element, tabs);
          $(element).find('.tabButtonLane button:visible').last().click();
        });
      });
    }
  });
});


function initButtons(buttonContainer, finishedHandler) {
  var skillform = buttonContainer.closest('.skillform');
  
  var tdoll = mw.config.get("wgPageName"); //skillform.data('tdollId'); // For debugging, pagename

  skillform.addClass("loading");
  
  var failureHandler = function(jqXHR, textStatus, errorThrown) {
    skillform.removeClass("loading");
    console.log("failureHandler", jqXHR, textStatus, errorThrown);
  };
  
  var finishedSecondSkillHandler = function(data, textStatus, jqxhr) {
    skillform.removeClass("loading");
    var buttonData = convertSkillData(data);
    
    var button = $('<button></button>');
    button.data('skilldata', buttonData);
    button.text('Skill2');
    buttonContainer.append(button);
    
    finishedHandler(buttonContainer.find('button'));
  };

  var noSecondSkillHandler = function(jqXHR, textStatus, errorThrown) {
    skillform.removeClass("loading");
    console.log("No second skill found");
    finishedHandler(buttonContainer.find('button'));
  };

  var loadSecondSkillHandler = function() {
    var url = "/index.php?title=" + tdoll +"/skill2data&action=raw";
    $.ajax({
      url: url,
      success: finishedSecondSkillHandler,
      error: noSecondSkillHandler,
      dataType: "text"
    });
  };

  var firstSkillSuccessHandler = function(data, textStatus, jqxhr) {
    var buttonData = convertSkillData(data);
    
    // Remove any existence of another button
    buttonContainer.empty();
    
    var button = $('<button></button>');
    button.data('skilldata', buttonData);
    button.text('Skill1');
    buttonContainer.append(button);
    
    loadSecondSkillHandler();
  };
  
  var url = "/index.php?title=" + tdoll +"/skilldata&action=raw";
  $.ajax({
    url: url,
    success: firstSkillSuccessHandler,
    error: failureHandler,
    dataType: "text"
  });
}

function initSkillForm(element, tabs) {
  var skillform = $(element);
          
  // selector is not possible in Wiki so we have to create it :/
  var levelSelector = skillform.find('.skilllevel select');
  if (levelSelector.length < 1) {
    levelSelector = $('<select></select>');
    levelSelector.addClass("gf-droplist");
    skillform.find('.skilllevel').append(levelSelector);
  } 
  levelSelector.change(function() { display_data(skillform, $(this).data('skilldata')); });
  
  var idx = 0;
  for (idx=0; idx<10; idx++) {
    var opt = $('<option></option>');
    opt.text('Lv. ' + (idx+1));
    opt.attr('value', idx);
    if (idx == 9) opt.prop('selected', true);
    levelSelector.append(opt);
  }
  
  // What is this difference exactly? If known: please move to a proper CSS class and add/remove it as needed
  /*if (skill_data.hasOwnProperty('cost')) {
    if (skill_data.hasOwnProperty('cooldown')) levelSelector.css('background-color', '#739ee7');
    else levelSelector.css('background-color', '#f76529');
  }*/
  
  tabs.click(function(evt) {
    skillformButtonHandler(evt.target);
  });
}

function skillformButtonHandler(element) {
  var currentButton = $(element);
  var skillform = currentButton.closest('.skillform');
  
  skillform.find('.tabButtonLane button').removeClass('tabButton-active');
  currentButton.addClass('tabButton-active');
  
  var convertedData = currentButton.data('skilldata');
  
  display_data(skillform, convertedData);
}

function convertSkillData(pagedata) {
  skill_data = {};
  var key;
  $.each(pagedata.split("\n"), function(index, value) {
    if (value.charAt(0) == "!") {
      // here we take the row-header as key and memorize it in key
      key = value.substring(1).trim();
    } else if (value.charAt(0) == "|" && value.charAt(1) !== "-" && value.charAt(1) !== "}") {
      if (value.split("|").length < 4) {
        // Seems to be a value without different levels, so just take it after the last "|" and trim it
        skill_data[key] = value.substring(value.lastIndexOf("|") + 1).trim();
      } else {
        // Several values split by "||"
        skill_data[key] = $.map(value.substring(1).split("||"), $.trim);
      }
    }
  });
  return skill_data;
} 

function calculateDescriptionText(data, chosenLevelIdx) {
  var regex = /\(\$\w+\)/g;
  var resultText = data.text;
  
  if (!data.text || typeof data.text.match !== "function") {
    console.log("debug", data);
    return resultText;
  }
  
  var vars = data.text.match(regex);
  var i; // For i not being global :)
  for (i = 0; i < vars.length; i++) {
    var_name = vars[i].substring(2, vars[i].length - 1);
    resultText = resultText.replace(vars[i], data[var_name][chosenLevelIdx]);
  }
  return resultText;
}

function calculateConditionText(data, chosenLevelIdx) {
  var result = "Passive";
  if (data.hasOwnProperty('cost')) {
    result = data.cost + ' support point(s) per use';
    if (data.hasOwnProperty('cooldown')) {
      result += ', ' + data.cooldown + ' turn cooldown';
    }
  } else if (data.hasOwnProperty('cooldown')) {
    result = data.cooldown[chosenLevelIdx] + 's cooldown';
    if (data.hasOwnProperty('initial')) {
      result += ', ' + data.initial + 's initial cooldown';
    }
  } else if (data.hasOwnProperty('activation')) {
    result = data.activation[chosenLevelIdx] + '% chance to activate';
  }
  return result;
}
 
function display_data(skillDataContainer, data) {
  if (data == null) {
    console.log("called without data", data);
    return;
  }
  
  // Make sure skillcontainer is visible, as it is display:none by default
  skillDataContainer.find('.skillcontent').show();
  
  // We have to remember skilldata for the levelSelector
  var levelSelector = skillDataContainer.find('.skilllevel select');
  levelSelector.data('skilldata', data);
      
  var name = skillDataContainer.find('.skillname');
  name.text(data.name);
  
  var iconImg = skillDataContainer.find('.skillicon img');
  var iconId = data.icon || "";
  var iconFilename = "Icon_Skill_" + iconId + ".png";
  if (iconImg.attr('alt') != iconFilename) {
    iconImg.attr('alt', iconFilename);
    var wikiPath = gfUtils.createWikiPathPart(iconFilename);
    iconImg.attr('src', "/images/" + wikiPath + iconFilename);
    iconImg.attr('srcset', "/images/thumb/" + wikiPath + iconFilename + "/75px-" + iconFilename + " 1.5x, /images/" + wikiPath + iconFilename + " 2x");
  }

  var chosenLevelIdx = skillDataContainer.find('.skilllevel select').val();
  
  var formatted_text = calculateDescriptionText(data, chosenLevelIdx);
  var description = skillDataContainer.find('.skilldesc');
  description.text(formatted_text);
  
  var conditions = skillDataContainer.find('.skillconditions');
  if (data.hasOwnProperty('cost')) {
    conditions.addClass('cost');
  } else {
    conditions.removeClass('cost');
  }
  if (data.hasOwnProperty('cooldown')) {
    conditions.addClass('cooldown');
  } else {
    conditions.removeClass('cooldown');
  }
  
  var conditionText = calculateConditionText(data, chosenLevelIdx);
  conditions.text(conditionText);
}