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
Select Box reference corrected
Added document-ready wait functionality as the MediaWiki does not wait for DOM
 
(29 intermediate revisions by 2 users not shown)
Line 1: Line 1:
<includeonly><script>
<includeonly><script>
RLQ.push(['jquery', function () {
  $(document).ready(function() {
    // Let's make sure the correct values are shown
    $('.modswitcher').change();
  });
}]);
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);
    }
  }
  // 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) {
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);
         var selectBox = $(element);
       
          
         costumeSelectionPathsString = selectBox.value();
         costumeSelectionIndex = selectBox.prop('selectedIndex');
         costumeSelectionIndex = selectBox.prop('selectedIndex');
          
          
Line 11: Line 73:
         }
         }


         selectBox.closest('.costumeContainer').find('.chibiAnimation,.live2dAnimation').trigger("costume_changed", chibiCostumeName);
         selectBox.closest('.costumeContainer').find('.chibiAnimation,.live2dAnimation,.artTab').trigger("costume_changed", chibiCostumeName);
 
       
         costumePaths = costumeSelectionPathsString.split(",,");
         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');
         $("#fullart a").attr("href", costumePaths[0]);
         var costumeId = tdollId + chibiCostumeName;
        $("#fullart a img").attr("src", costumePaths[0]);
          
         $("#fullart a img").attr("srcset", costumePaths[0]);
        var cpp = window.gfUtils.createWikiPathPart;
         $("#fullart a img").attr("alt", costumePaths[0]);
       
 
         var fullartSPath = basePath + cpp (costumeId +"_S.png") + costumeId +"_S.png";
         $("#fullart_D a").attr("href", costumePaths[1]);
         var chibiPath = basePath + cpp(costumeId +"_chibi.png") + costumeId +"_chibi.png";
        $("#fullart_D a img").attr("src", costumePaths[1]);
       
         $("#fullart_D a img").attr("srcset", costumePaths[1]);
         $("#fullart_S").attr("src", fullartSPath);
        $("#fullart_D a img").attr("alt", costumePaths[1]);
         $("#fullart_S").attr("srcset", fullartSPath);
         $("#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 class="skill" style="background-color:rgba(250,250,250,0.9);width:100%" autocomplete="off" onchange="swap_costume(this)" >
</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