Welcome to IOPWiki, Commander.
We are searching for editors to complete gameplay topics in all games. You can contribute without an account. Learn how to contribute and join our Discord server.

Widget:costumeSwitcher: Difference between revisions

Welcome to IOP Wiki. This website is maintained by the Girls' Frontline community and is free to edit by anyone.
Jump to navigation Jump to search
← Older edit
Pianoforte (talk | contribs)
12,299 edits
No edit summary
Added document-ready wait functionality as the MediaWiki does not wait for DOM
 
(45 intermediate revisions by 2 users not shown)
Line 1: Line 1:
<includeonly><script>
<includeonly><script>
function swap_costume() {
RLQ.push(['jquery', function () {
        costumeSelection = document.getElementById("costumeSelection").value;
  $(document).ready(function() {
    // Let's make sure the correct values are shown
    $('.modswitcher').change();
  });
}]);


        costumePaths = costumeSelection.split(",,");
function swap_mod(element) {
  var selectBox = $(element);
  var selectedValue = selectBox.find(':selected').val();
  var tmp = new DOMParser().parseFromString(selectedValue, "text/html");
  var tdollData = jQuery.parseJSON(tmp.documentElement.textContent);
 
  var statContainer = selectBox.closest('.stattable');
 
  tdollData = updateCalculatedValues(tdollData);
 
  for (var key in tdollData) {
    if (tdollData.hasOwnProperty(key)) {
      var valField = statContainer.find('*[data-tdoll-stat-id="' + key + '"]');
      var newValue = tdollData[key];
      valField.text(newValue);
    }
  }


        $("#fullart a").attr("href", costumePaths[0]);
  // ToDo: find a better way of finding out if it's a mod
        $("#fullart a img").attr("src", costumePaths[0]);
  // ToDo: find a better way of telling which skills are available with which mod
        $("#fullart a img").attr("srcset", costumePaths[0]);
  var isMod = selectBox.find(':selected').text().indexOf('MOD') >= 0;
        $("#fullart a img").attr("alt", costumePaths[0]);
  statContainer.find('.skillform .tabButtonLane button').last().toggle(isMod);
 
  // With mod-change the visible skillbuttons might change, too, so trigger the last visible one
  // For now it only has to be set if we change to Base, as it has only one skill
  if (!isMod) {
    statContainer.find('.skillform .tabButtonLane button:visible').last().click();
  }
}
 
function updateCalculatedValues(data) {
  var ret = data;
 
  // Calculating Max HP for full dummied T-Doll
  if (ret.hasOwnProperty("max_hp_t")) {
    ret.hpmaxwd = ret.max_hp_t * 5;
  }
 
  return ret;
}
 
function swap_costume(element) {
    var neededGadgets = [ 'ext.gadget.md5hasher' ];
    if (mw.user.options.get("gadget-chibiAnimation") == 1) {
      neededGadgets.push("ext.gadget.chibiAnimation");
    }
    if (mw.user.options.get("gadget-live2dAnimation") == 1) {
      neededGadgets.push("ext.gadget.live2dAnimation");
    }
   
    // Switch costume when everything is ready
    mw.loader.using(neededGadgets).then(function () {
      swap_costume_intern(element);
    });
}


        $("#fullart_D a").attr("href", costumePaths[1]);
function swap_costume_intern(element) {
         $("#fullart_D a img").attr("src", costumePaths[1]);
         var selectBox = $(element);
         $("#fullart_D a img").attr("srcset", costumePaths[1]);
          
         $("#fullart_D a img").attr("alt", costumePaths[1]);
         costumeSelectionIndex = selectBox.prop('selectedIndex');
       
         $("#fullart_S img").attr("src", costumePaths[2]);
         var chibiCostumeName = "";
         $("#fullart_S img").attr("srcset", costumePaths[2]);
         if (costumeSelectionIndex != 0) {
          chibiCostumeName = "_costume" + costumeSelectionIndex
        }


        selectBox.closest('.costumeContainer').find('.chibiAnimation,.live2dAnimation,.artTab').trigger("costume_changed", chibiCostumeName);
       
        var basePath = "https://en.gfwiki.com/images/"; // ToDo: find a better way to find out the base path
        var tdollId = selectBox.closest('.costumeContainer').find('.tdoll_chibi').data('tdollId');
        var costumeId = tdollId + chibiCostumeName;
       
        var cpp = window.gfUtils.createWikiPathPart;
       
        var fullartSPath = basePath + cpp (costumeId +"_S.png") + costumeId +"_S.png";
        var chibiPath = basePath + cpp(costumeId +"_chibi.png") + costumeId +"_chibi.png";
       
        $("#fullart_S").attr("src", fullartSPath);
        $("#fullart_S").attr("srcset", fullartSPath);


        //$("#fullart a img").attr("srcset", "/wiki/Special:Redirect/file/Springfield" + costumeSelection + ".png 1.5x, /wiki/Special:Redirect/file/Springfield" + costumeSelection + ".png 2x");
         $(".tdoll_chibi>img").attr("src", chibiPath);
         $(".tdoll_chibi").attr("src", costumePaths[3]);
          
          
         // As we change the link, we have to update the Thumb-Cache of the Media Viewer
         // As we change the link, we have to update the Thumb-Cache of the Media Viewer
Line 35: Line 102:
}
}


RLQ.push(function () {
</script>
  $(document).ready(function() {
<div style="display:flex">
swap_costume();
<!--{if $moddable neq ''}--><select class="gf-droplist modswitcher" style="padding-left: 2px;padding-right: 8px;margin-right: 2px;" autocomplete="off" onchange="swap_mod(this)">
  });
<option value='<!--{$defaultstats|escape:'html'}-->'>BASE</option>
});
<option value='<!--{$mod1stats|escape:'html'}-->'>MOD1</option>
 
<option value='<!--{$mod2stats|escape:'html'}-->'>MOD2</option>
</script><select id="costumeSelection" onchange="swap_costume()">
<option value='<!--{$mod3stats|escape:'html'}-->' selected="selected">MOD3</option>
</select><!--{/if}-->
<select class="gf-droplist" style="flex-grow: 1;" autocomplete="off" onchange="swap_costume(this)" >
<option value="<!--{$defaultpaths|escape:'html'}-->" selected="selected">Default</option>
<option value="<!--{$defaultpaths|escape:'html'}-->" selected="selected">Default</option>
<option value="_mod">Mod</option>
<!--{if $costume1name neq ''}--><option value="<!--{$costume1paths|escape:'html'}-->"><!--{$costume1name|escape:'html'}--></option><!--{/if}-->
<option value="<!--{$costume1paths|escape:'html'}-->"><!--{$costume1name|escape:'html'}--></option>
<!--{if $costume2name neq ''}--><option value="<!--{$costume2paths|escape:'html'}-->"><!--{$costume2name|escape:'html'}--></option><!--{/if}-->
<option value="<!--{$costume2paths|escape:'html'}-->"><!--{$costume2name|escape:'html'}--></option>
<!--{if $costume3name neq ''}--><option value="<!--{$costume3paths|escape:'html'}-->"><!--{$costume3name|escape:'html'}--></option><!--{/if}-->
<option value="<!--{$costume3paths|escape:'html'}-->"><!--{$costume3name|escape:'html'}--></option>
<!--{if $costume4name neq ''}--><option value="<!--{$costume4paths|escape:'html'}-->"><!--{$costume4name|escape:'html'}--></option><!--{/if}-->
<option value="<!--{$costume4paths|escape:'html'}-->"><!--{$costume4name|escape:'html'}--></option>
<!--{if $costume5name neq ''}--><option value="<!--{$costume5paths|escape:'html'}-->"><!--{$costume5name|escape:'html'}--></option><!--{/if}-->
<option value="<!--{$costume5paths|escape:'html'}-->"><!--{$costume5name|escape:'html'}--></option>
</select></div></includeonly>
</select></includeonly>


<noinclude>
<noinclude>
Line 57: Line 125:
|defaultpaths={{filepath:Springfield.png|420}},,{{filepath:Springfield_D.png|420}},,{{filepath:Springfield_S.png|420}},,{{filepath:Springfield_chibi.png|420}}
|defaultpaths={{filepath:Springfield.png|420}},,{{filepath:Springfield_D.png|420}},,{{filepath:Springfield_S.png|420}},,{{filepath:Springfield_chibi.png|420}}
|costume1name=test1
|costume1name=test1
|moddable=1
|costume1paths={{filepath:Springfield_costume1.png|420}},,{{filepath:Springfield_costume1_D.png|420}},,{{filepath:Springfield_costume1_S.png|420}},,{{filepath:Springfield_costume1_chibi.png|420}}
|costume1paths={{filepath:Springfield_costume1.png|420}},,{{filepath:Springfield_costume1_D.png|420}},,{{filepath:Springfield_costume1_S.png|420}},,{{filepath:Springfield_costume1_chibi.png|420}}
|costume2name=test2
|costume2name=test2
Line 67: Line 136:
<div id="fullart_D" style="float:left; padding: 10px;">[[file:Springfield_D.png|420px]]</div>
<div id="fullart_D" style="float:left; padding: 10px;">[[file:Springfield_D.png|420px]]</div>


<div id="dummydiv" style="float:left; padding: 10px; border: thin solid white;" onclick="alert('hi');">[[File:Springfield_chibi.png|link=|center|class=tdoll_chibi]]</div>
<div id="dummydiv" style="float:left; padding: 10px; border: thin solid white;" class="tdoll_chibi">[[File:Springfield_chibi.png|link=|center|]]</div>


</noinclude>
</noinclude>

Latest revision as of 15:07, 14 October 2019


test


Retrieved from "http://iopwiki.com/index.php?title=Widget:costumeSwitcher&oldid=79971"