RS_ScreenOrientation.js

//================================================================
// RS_ScreenOrientation.js
// ---------------------------------------------------------------
// The MIT License
// Copyright (c) 2017 biud436
// ---------------------------------------------------------------
// Free for commercial and non commercial use.
//================================================================
/*:
 * @plugindesc <RS_ScreenOrientation>
 * @author biud436
 *
 * @param Image
 * @desc Prevent deletion.
 * @default btn_fullscr
 * @require 1
 * @dir img/pictures
 * @type file
 *
 * @param default orientation
 * @type select
 * @desc landscape, portrait
 * @default landscape
 * @option landscape
 * @option portrait
 *
 * @help
 * =============================================================================
 * Test Devices
 * =============================================================================
 * Android Chrome (64.0.3282.137) - Supported
 * iOS Safari (iPhone8) - Not Supported
 * =============================================================================
 * How to setup an image
 * =============================================================================
 * Download an image from
 * https://github.com/biud436/MV/blob/master/docs/images/btn_fullscr.png
 * and then place it in your img/pictures folder.
 * =============================================================================
 * Version Log
 * =============================================================================
 * 2017.02.16 (v1.0.0) - First Release
 * 2018.03.01 (v1.0.1) :
 * - Changed the image and works.
 * - Added the feature that can automatically hide the image when changing the screen orientation is to a landscape.
 * - Fixed the bug that causes when restarting the game.
 */
/*:ko
 * @plugindesc <RS_ScreenOrientation>
 * @author biud436
 *
 * @param Image
 * @text 이미지
 * @desc Prevent deletion.
 * @default btn_fullscr
 * @require 1
 * @dir img/pictures
 * @type file
 *
 * @param default orientation
 * @text 기본 화면 방향
 * @type select
 * @desc 기본 화면 방향을 설정합니다.
 * @default landscape
 * @option landscape (가로)
 * @value landscape
 * @option portrait (세로)
 * @value portrait
 *
 * @help
 *
 * 플러그인 안드로이드 크롬 웹 브라우저 전용입니다. (홈에 추가한 상태가 아닐 때)
 *
 * 화면 방향 변경에 대한 권한은 보통 버튼을 누르는 것과 같은 실제 상호 작용이 있을 때에만
 * 얻을 수 있습니다.
 *
 * 그래서 전체 화면 변경 버튼을 눌러야만 화면 방향을 변경되게 만들 수 밖에 없었습니다.
 *
 * =============================================================================
 * 테스트 기기
 * =============================================================================
 *
 * Android Chrome (64.0.3282.137) - 크롬 브라우저에서만 지원합니다.
 * iOS Safari (iPhone8) - 사파리는 이 기능을 지원하지 않습니다.
 *
 * =============================================================================
 * 이미지 설정 방법
 * =============================================================================
 *
 * 이미지를 다음 링크에서 다운로드 받은 후 img/pictures 폴더에 추가하세요.
 *
 * 링크 - https://github.com/biud436/MV/blob/master/docs/images/btn_fullscr.png
 *
 * =============================================================================
 * 변동 사항
 * =============================================================================
 * 2017.02.16 (v1.0.0) - First Release
 * 2018.03.01 (v1.0.1) :
 * - Changed the image and works.
 * - Added the feature that can automatically hide the image when changing the screen orientation is to a landscape.
 * - Fixed the bug that causes when restarting the game.
 */

var Imported = Imported || {};
Imported.ScreenOrientation = true;

(function () {
  var parameters = $plugins.filter(function (i) {
    return i.description.contains('<RS_ScreenOrientation>');
  });

  parameters = parameters.length > 0 && parameters[0].parameters;

  var tempEvent;

  //============================================================================
  // Graphics
  //============================================================================

  Graphics._convertScreenOrientation = function (event) {
    Graphics._requestFullScreen();
    var orientation =
      screen.orientation || screen.mozOrientation || screen.msOrientation;
    if (orientation) {
      orientation
        .lock(parameters['default orientation'])
        .then(null, function (error) {});
    }
    if (event) event.preventDefault();
  };

  //============================================================================
  // Scene_Title
  //============================================================================

  var alias_Scene_Title_create = Scene_Title.prototype.create;
  Scene_Title.prototype.create = function () {
    alias_Scene_Title_create.call(this);
    if (Utils.isMobileDevice()) {
      var userAgent = window.navigator.userAgent || '';
      if (userAgent.match(/iPad/i) || userAgent.match(/iPhone/i)) {
        // A Safari Mobile is not supported in ScreenOrientation API.
      } else if (
        userAgent.match(/Chrome/i) ||
        userAgent.match(/Chromium/i) ||
        userAgent.match(/Firefox/i)
      ) {
        this.createFullscreenImage();
      }
    }
  };

  Scene_Title.prototype.createFullscreenImage = function () {
    var div, path, filePath, img, imgName;

    var target_div = document.querySelector('#div_fullscr');
    if (target_div) document.body.removeChild(target_div);

    div = document.createElement('div');
    div.id = 'div_fullscr';

    imgName = parameters['Image'] + '.png';

    if (Utils.RPGMAKER_VERSION >= '1.6.0' && Utils.isNwjs()) {
      path = require('path');
      var base, root;
      base = path.dirname(process.mainModule.filename);
      root = path.join(base, 'img', 'pictures');
      filePath = path.join(root, imgName);
    } else {
      filePath = 'img/pictures/' + imgName;
    }

    img = new Image();
    img.id = 'btn_fullscr';
    img.src = filePath;
    img.hidden = true;

    img.width = 96;
    img.height = 96;

    img.addEventListener(
      'click',
      function (e) {
        Graphics._convertScreenOrientation(e);
      },
      false
    );

    img.addEventListener(
      'touchend',
      function (e) {
        Graphics._convertScreenOrientation(e);
      },
      false
    );

    div.appendChild(img);
    div.style.zIndex = 98;

    Graphics._centerElement(div);
    document.body.appendChild(div);

    var orientation =
      screen.orientation || screen.mozOrientation || screen.msOrientation;
    if (orientation) {
      window.addEventListener(
        'orientationchange',
        Scene_Title.prototype.onorientationchange.bind(this),
        false
      );
      if (!orientation.type.match(/(?:landscape)/)) {
        img.hidden = false;
      }
    }

    this.on(
      'removed',
      function () {
        var target_div = document.querySelector('#div_fullscr');
        if (target_div) document.body.removeChild(target_div);
      },
      this
    );
  };

  Scene_Title.prototype.onorientationchange = function () {
    var orientation =
      screen.orientation || screen.mozOrientation || screen.msOrientation;
    if (!orientation) return;
    if (orientation.type.match(/(?:landscape)/)) {
      var target_div = document.querySelector('#div_fullscr');
      if (target_div) {
        target_div.hidden = true;
      }
    } else {
      var target_div = document.querySelector('#div_fullscr');
      if (target_div) {
        target_div.hidden = false;
      }
    }
  };
})();