Как запросить полноэкранный режим в скомпилированном дротике

Question

Я играю с приложением Dart, пытающимся заставить работать полноэкранный режим. Мой HTML (исключая шаблон):

<div id="fullscreen_div">
  Clicking this should cause it to go fullscreen!
</div>

Мой код дартс:

import 'dart:html';

void main() {
  var div = querySelector('#fullscreen_div');
  div.onClick.listen((MouseEvent e) {
    div.requestFullscreen();
    print('requested fullscreen');
  });
}

Вот это на DartPad.

Если я сделал это правильно, один раз нажав на div, вы перейдете в полноэкранный режим. На Chromium это работает. При компиляции в JavaScript (как отладочный, так и свернутый) этого не происходит, и консоль выдает:

Uncaught TypeError: undefined is not a function

Это происходит как в Chrome, Firefox, так и в IE (протестировано в Windows 7). Из того, что я понял, это распространенная ошибка JavaScript, и при поиске не возникает ничего очевидного.

Есть идеи почему requestFullScreen не будет работать, когда дротик скомпилирован в JS?

Answer 1

Как указано в комментариях (спасибо Гюнтер!), Это известная проблема. № 12 в этой теме опубликовал хороший обходной путь, отредактированный мной, чтобы быть немного более общим:

import 'dart:js';
void fullscreenWorkaround(Element element) {
  var elem = new JsObject.fromBrowserObject(element);

  if (elem.hasProperty("requestFullscreen")) {
    elem.callMethod("requestFullscreen");
  }
  else {
    List<String> vendors = ['moz', 'webkit', 'ms', 'o'];
    for (String vendor in vendors) {
      String vendorFullscreen = "${vendor}RequestFullscreen";
      if (vendor == 'moz') {
        vendorFullscreen = "${vendor}RequestFullScreen";
      }
      if (elem.hasProperty(vendorFullscreen)) {
        elem.callMethod(vendorFullscreen);
        return;
      }
    }
  }
}

Я использовал это в своем коде, и заменил этот вызов

div.requestFullscreen();

с

fullscreenWorkaround(div);

который работал отлично. Протестировано и работает скомпилировано на Chrome и IE.

Answer 2

Вот расширенная версия взлома Тоббе для использования всего полноэкранного API.

import 'dart:html';
import 'dart:js';

// Workaround for https://code.google.com/p/dart/issues/detail?id=4136
class FullscreenWorkaround {
  static void requestFullscreen(Element element) {
    _callMethods(element, [
      'requestFullscreen',
      'webkitRequestFullscreen',
      'mozRequestFullScreen',
      'msRequestFullscreen',
      'oRequestFullscreen'
    ]);
  }

  static void exitFullscreen() {
    _callMethods(document, [
      'exitFullscreen',
      'webkitExitFullscreen',
      'mozCancelFullScreen',
      'msExitFullscreen',
      'oExitFullscreen'
    ]);
  }

  static bool get fullscreenEnabled {
    var result = _getProperty(document, [
      'fullscreenEnabled',
      'webkitFullscreenEnabled',
      'mozFullScreenEnabled',
      'msFullscreenEnabled',
      'oFullscreenEnabled'
    ]);
    return result != null ? result : false;
  }

  static get fullscreenElement {
    return _getProperty(document, [
      'fullscreenElement',
      'webkitFullscreenElement',
      'mozFullScreenElement',
      'msFullscreenElement',
      'oFullscreenElement'
    ]);
  }

  static _callMethods(browserObject, List methods) {
    var jsElem = new JsObject.fromBrowserObject(browserObject);

    for (String methodName in methods) {
      if (jsElem.hasProperty(methodName)) {
        return jsElem.callMethod(methodName);
      }
    }
  }

  static _getProperty(browserObject, List properties) {
    var jsElem = new JsObject.fromBrowserObject(browserObject);

    for (String propertyName in properties) {
      if (jsElem.hasProperty(propertyName)) {
        return jsElem[propertyName];
      }
    }
  }
}