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
 
(62 intermediate revisions by 2 users not shown)
Line 1: Line 1:
<includeonly>
<includeonly><script>
<script>
RLQ.push(['jquery', function () {
function swap_costume() {
  $(document).ready(function() {
        costumeSelection = document.getElementById("costumeSelection").value;
    // 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("alt", costumePaths[0]);
  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();
  }
}


        $("#fullart_D a").attr("href", costumePaths[1]);
function updateCalculatedValues(data) {
        $("#fullart_D a img").attr("src", costumePaths[1]);
  var ret = data;
        $("#fullart_D a img").attr("alt", costumePaths[1]);
 
  // 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 = "";
        if (costumeSelectionIndex != 0) {
          chibiCostumeName = "_costume" + costumeSelectionIndex
        }


         //$("#fullart a img").attr("srcset", "/wiki/Special:Redirect/file/Springfield" + costumeSelection + ".png 1.5x, /wiki/Special:Redirect/file/Springfield" + costumeSelection + ".png 2x");
         selectBox.closest('.costumeContainer').find('.chibiAnimation,.live2dAnimation,.artTab').trigger("costume_changed", chibiCostumeName);
         $(".tdoll_chibi").attr("src", costumePaths[2]);
       
        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);
 
         $(".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
         // Clear up the thumbs cache
         // Clear up the thumbs cache
         if (mv && mv.mmv && mv.mmv.bootstrap && mv.mmv.bootstrap.viewer) {
         if (typeof mw !== "undefined" && typeof mw.mmv !== "undefined" && typeof mw.mmv.bootstrap !== "undefined") {
           mw.mmv.bootstrap.thumbs = [];
           mw.mmv.bootstrap.thumbs = [];
           // Search for all thumbs
           // Search for all thumbs
           mw.mmv.bootstrap.processThumbs($("#content"));
           mw.mmv.bootstrap.processThumbs($("#content"));
           // Re-Init the viewer with the new thumbs
           if (typeof mw.mmv.bootstrap.viewer !== "undefined") {
          mw.mmv.bootstrap.viewer.initWithThumbs(mw.mmv.bootstrap.thumbs);
            // Re-Init the viewer with the new thumbs
            mw.mmv.bootstrap.viewer.initWithThumbs(mw.mmv.bootstrap.thumbs);
          }
         }
         }
}
}
RLQ.push(function () {
  $(document).ready(function() {
swap_costume();
  });
});


</script>
</script>
<select id="costumeSelection" onchange="swap_costume()">
<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>
<option value="_mod">Mod</option>
<!--{if $costume1name neq ''}--><option value="<!--{$costume1paths|escape:'html'}-->"><!--{$costume1name|escape:'html'}--></option><!--{/if}-->
<option value="<!--{$costume1paths|escape:'html'}-->"><!--{$costume1|escape:'html'}--></option>
<!--{if $costume2name neq ''}--><option value="<!--{$costume2paths|escape:'html'}-->"><!--{$costume2name|escape:'html'}--></option><!--{/if}-->
<option value="<!--{$costume2paths|escape:'html'}-->"><!--{$costume2|escape:'html'}--></option>
<!--{if $costume3name neq ''}--><option value="<!--{$costume3paths|escape:'html'}-->"><!--{$costume3name|escape:'html'}--></option><!--{/if}-->
<option value="<!--{$costume3paths|escape:'html'}-->"><!--{$costume3|escape:'html'}--></option>
<!--{if $costume4name neq ''}--><option value="<!--{$costume4paths|escape:'html'}-->"><!--{$costume4name|escape:'html'}--></option><!--{/if}-->
</select>
<!--{if $costume5name neq ''}--><option value="<!--{$costume5paths|escape:'html'}-->"><!--{$costume5name|escape:'html'}--></option><!--{/if}-->
 
</select></div></includeonly>
 
</includeonly>


<noinclude>
<noinclude>
Line 53: Line 124:
{{#widget:costumeSwitcher
{{#widget:costumeSwitcher
|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}}
|costume1=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}}
|costume2=test2
|costume2name=test2
|costume2paths={{filepath:Springfield_costume2.png|420}},,{{filepath:Springfield_costume2_D.png|420}},,{{filepath:Springfield_costume2_S.png|420}},,{{filepath:Springfield_costume2_chibi.png|420}}
|costume2paths={{filepath:Springfield_costume2.png|420}},,{{filepath:Springfield_costume2_D.png|420}},,{{filepath:Springfield_costume2_S.png|420}},,{{filepath:Springfield_costume2_chibi.png|420}}
|costume3=test3
|costume3name=test3
|costume3paths={{filepath:Springfield_costume3.png|420}},,{{filepath:Springfield_costume3_D.png|420}},,{{filepath:Springfield_costume3_S.png|420}},,{{filepath:Springfield_costume3_chibi.png|420}}
|costume3paths={{filepath:Springfield_costume3.png|420}},,{{filepath:Springfield_costume3_D.png|420}},,{{filepath:Springfield_costume3_S.png|420}},,{{filepath:Springfield_costume3_chibi.png|420}}
}}
}}
Line 64: 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"