MediaWiki:Gadget-live2dBackgroundAnimation.js

注意：在保存之后，您可能需要清除浏览器缓存才能看到所作出的变更的影响。

• Firefox或Safari：按住Shift的同时单击刷新，或按Ctrl-F5或Ctrl-R（Mac为⌘-R）
• Google Chrome：按Ctrl-Shift-R（Mac为⌘-Shift-R）
• Internet Explorer：按住Ctrl的同时单击刷新，或按Ctrl-F5
• Opera：前往菜单 → 设置（Mac为Opera → Preferences），然后隐私和安全 → 清除浏览数据 → 缓存的图片和文件。

function getFilePath(name) {
  return "/images/" + window.gfUtils.createWikiPathPart(name) + name;
}

function modelChanged(containerDiv, finishedCallback) {
  try {
    var successCallback = function(l2d_tdoll_sprite) {
      var viewCanvas = containerDiv.find('.live2dstage').first();
      var l2d_tdoll_stage = viewCanvas.data('live2dStage');
      l2d_tdoll_stage.removeChildren();
      l2d_tdoll_stage.addChild(l2d_tdoll_sprite);
      
      l2d_tdoll_sprite.on('mousemove', function(evt) {
    const point = evt.data.global;
    l2d_tdoll_sprite.setViewPoint(0, 0);
	
	var view = $(l2d_tdoll_sprite.canvas);
	var offset = view.offset();
	
	var x = view.width() - point.x;
	if (x <= 0) x = 0;
	if (x >= view.width()) x = view.width();
	x = (x / view.width() * 60.0 - 30.0) * -1;
	
	var y = view.height() - point.y;
	if (y <= 0) y = 0;
	if (y >= view.height()) y = view.height();
	y = (y / view.height() * 60.0 - 30.0) * 1;
	
	
	l2d_tdoll_sprite.model.live2DModel.setParamFloat("PARAM_BGANGLE_X", x);
	l2d_tdoll_sprite.model.live2DModel.setParamFloat("PARAM_BGANGLE_Y", y);
	l2d_tdoll_sprite.model.live2DModel.saveParam();
  });
      
      finishedCallback();
    };
  
    var failureCallback = function(err) {
      console.log("Error loading model", err);
      finishedCallback();
    };
    
    // Calculate Background ID
    var bgId = containerDiv.data("bg-id");
    
    // Load model here
    gfUtils.live2dUtils.loadLive2dGirl(containerDiv, "Background", bgId, null, successCallback, failureCallback);
  } catch (err) {
    console.log("Error changing model", err);
    finishedCallback();
  }
}

function live2dButtonHandler(evt) {
  var live2dButton = $(evt.target);
  var backgroundDiv= live2dButton.closest('.backgroundLive2d');
  
  if (live2dButton.is('.enabled')) {
    backgroundDiv.removeClass('live2dEnabled');
    live2dButton.removeClass('enabled');
    gfUtils.live2dUtils.createLive2dView(backgroundDiv, function(view) {
      var l2d_tdoll_stage = view.data('live2dStage');
      l2d_tdoll_stage.removeChildren();
      backgroundDiv.removeClass("loading");
    });
  } else {
    backgroundDiv.addClass('live2dEnabled');
    live2dButton.addClass('enabled');
    gfUtils.live2dUtils.createLive2dView(backgroundDiv, function(view) {
      if (backgroundDiv.find('.live2dstage').length < 1) {
        backgroundDiv.append(view);
      }
      
      modelChanged(backgroundDiv, function() {
        backgroundDiv.removeClass("loading");
      });
    });
  }
}

function initBackgroundEngine(containerDiv) {
    console.log("initing", containerDiv);
    
    // Create Live2D Button
    var switchBgLive2dButtonHandler = function(evt) {
    	containerDiv.addClass("loading");
        mw.loader.using('ext.gadget.live2dLoader').then(function() {
	    	window.animations.Live2dLoader.init().then(function() {
		        live2dButtonHandler(evt);
		    }, function(x,y,z) {
		        console.error("Loading Live2D framework failed",x,y,z);
		        containerDiv.removeClass("loading");
		    });
	    }, function(x,y,z) {
	        console.error("Loading live2dLoader failed",x,y,z);
	    });
    };
    var live2dButton = gfUtils.createSliderButton("/images/a/a3/live2d-logo.png", switchBgLive2dButtonHandler);
    
    var live2dSwitcher = $('<div></div>');
    live2dSwitcher.addClass('live2dBgSwitcher');

    var live2dSwitcherContainer = $('<div></div>');
    live2dSwitcherContainer.addClass('live2dSwitcherContainer');
    live2dSwitcherContainer.append(live2dButton);

    live2dSwitcher.append(live2dSwitcherContainer);
    containerDiv.append(live2dSwitcher);
}

RLQ.push(function () {
  $(document).ready(function() {
    var containerDiv = $('.backgroundLive2d');
    console.log("Booting up L2D BG Gadget. Container count: ", containerDiv.length);
    $(containerDiv).each(function() {
      initBackgroundEngine($(this));
    });
  });
});

console.log("Loaded L2D BG Gadget.");