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
m Dfiferent approach to reload the T-Doll
Added document-ready wait functionality as the MediaWiki does not wait for DOM
 
(34 intermediate revisions by 2 users not shown)
Line 1: Line 1:
<includeonly><script>
<includeonly><script>
function swap_costume() {
RLQ.push(['jquery', function () {
        var tdollId = mw.config.get("wgPageName");
  $(document).ready(function() {
    // Let's make sure the correct values are shown
    $('.modswitcher').change();
  });
}]);


        costumeSelectionPathsString = document.getElementById("costumeSelection").value;
function swap_mod(element) {
        costumeSelectionIndex = document.getElementById("costumeSelection").selectedIndex;
  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);
    }
  }
 
  // ToDo: find a better way of finding out if it's a mod
  // ToDo: find a better way of telling which skills are available with which mod
  var isMod = selectBox.find(':selected').text().indexOf('MOD') >= 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);
    });
}
 
function swap_costume_intern(element) {
        var selectBox = $(element);
       
        costumeSelectionIndex = selectBox.prop('selectedIndex');
          
          
         var chibiCostumeName = "";
         var chibiCostumeName = "";
Line 10: Line 72:
           chibiCostumeName = "_costume" + costumeSelectionIndex
           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;
          
          
         loadGirl(baseView, tdollId, chibiCostumeName );
         var fullartSPath = basePath + cpp (costumeId +"_S.png") + costumeId +"_S.png";
 
         var chibiPath = basePath + cpp(costumeId +"_chibi.png") + costumeId +"_chibi.png";
        costumePaths = costumeSelectionPathsString.split(",,");
       
 
         $("#fullart_S").attr("src", fullartSPath);
        $("#fullart a").attr("href", costumePaths[0]);
         $("#fullart_S").attr("srcset", fullartSPath);
        $("#fullart a img").attr("src", costumePaths[0]);
         $("#fullart a img").attr("srcset", costumePaths[0]);
        $("#fullart a img").attr("alt", costumePaths[0]);
 
        $("#fullart_D a").attr("href", costumePaths[1]);
        $("#fullart_D a img").attr("src", costumePaths[1]);
        $("#fullart_D a img").attr("srcset", costumePaths[1]);
        $("#fullart_D a img").attr("alt", costumePaths[1]);
         $("#fullart_S").attr("src", costumePaths[2]);
         $("#fullart_S").attr("srcset", costumePaths[2]);
 
 
        $(".tdoll_chibi").attr("src", costumePaths[3]);


        $(".tdoll_chibi>img").attr("src", chibiPath);
          
          
         // 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 45: Line 102:
}
}


</script><select id="costumeSelection" class=skill style="background-color:rgba(250,250,250,0.9);width:100%" onchange="swap_costume()" >
</script>
<div style="display:flex">
<!--{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>
<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>
<!--{if $costume1name neq ''}--><option value="<!--{$costume1paths|escape:'html'}-->"><!--{$costume1name|escape:'html'}--></option><!--{/if}-->
<!--{if $costume1name neq ''}--><option value="<!--{$costume1paths|escape:'html'}-->"><!--{$costume1name|escape:'html'}--></option><!--{/if}-->
Line 52: Line 117:
<!--{if $costume4name neq ''}--><option value="<!--{$costume4paths|escape:'html'}-->"><!--{$costume4name|escape:'html'}--></option><!--{/if}-->
<!--{if $costume4name neq ''}--><option value="<!--{$costume4paths|escape:'html'}-->"><!--{$costume4name|escape:'html'}--></option><!--{/if}-->
<!--{if $costume5name neq ''}--><option value="<!--{$costume5paths|escape:'html'}-->"><!--{$costume5name|escape:'html'}--></option><!--{/if}-->
<!--{if $costume5name neq ''}--><option value="<!--{$costume5paths|escape:'html'}-->"><!--{$costume5name|escape:'html'}--></option><!--{/if}-->
</select></includeonly>
</select></div></includeonly>


<noinclude>
<noinclude>
Line 60: 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 70: 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"