showDialogElement function

HTMLDivElement showDialogElement(HTMLElement content, { double? transparency, String? padding, })

Shows an Element dialog.

content The element to show. transparency The transparency of the dialog as double. padding The padding of the dialog.

Implementation

HTMLDivElement showDialogElement(HTMLElement content,
    {double? transparency, String? padding}) {
  if (transparency == null || transparency <= 0) transparency = 0.90;

  padding ??= '2vh 0 0 0';

  var dialog = HTMLDivElement()
    ..style.position = 'fixed'
    ..style.left = '0px'
    ..style.top = '0px'
    ..style.zIndex = '999999999'
    ..style.padding = padding
    ..style.width = '100vw'
    ..style.height = '100vh'
    ..style.overflow = 'auto'
    ..style.backgroundColor = 'rgba(0,0,0, $transparency)'
    ..style.textAlign = 'center'
    ..style.setProperty('backdrop-filter', 'blur(6px)');

  var close = HTMLSpanElement()
    ..innerHTML = '&times;'.toJS
    ..style.float = 'right'
    ..style.fontSize = '28px'
    ..style.fontWeight = 'bold'
    ..style.color = 'rgba(255,255,255,0.8)'
    ..style.margin = '0px 20px 10px 10px'
    ..style.cursor = 'pointer';

  close.onClick.listen((e) {
    dialog.style.display = 'none';
    dialog.remove();
  });

  dialog.appendChild(close);

  String? src;
  String? title;
  var isImage = false;

  if (content.isA<HTMLImageElement>()) {
    src = (content as HTMLImageElement).src;
    title = content.title;
    isImage = true;
  } else if (content.isA<HTMLVideoElement>()) {
    src = (content as HTMLVideoElement).src;
    title = content.title;
  }

  HTMLAnchorElement? download;

  if (src != null) {
    String? file;

    if (src.startsWith('data:')) {
      var mimeType = DataURLBase64.parseMimeType(src);

      if (mimeType != null) {
        file = title != null && title.isNotEmpty && title.length <= 50
            ? mimeType.fileName(title)
            : mimeType.fileNameTimeMillis();
      }
    } else {
      file = getPathFileName(src);
    }

    if (file == null || file.isEmpty) file = 'file.download';

    download = HTMLAnchorElement()
      ..href = src
      ..download = file
      ..innerHTML = '&#8675;'.toJS
      ..style.float = 'right'
      ..style.textDecoration = 'none'
      ..style.fontSize = '24px'
      ..style.fontWeight = 'bold'
      ..style.color = 'rgba(255,255,255,0.8)'
      ..style.margin = '4px 10px 10px 10px'
      ..title = 'Download'
      ..style.cursor = 'pointer';

    dialog.appendChild(download);
  }

  if (isImage) {
    var rotate = HTMLSpanElement()
      ..innerHTML = '&#10549;'.toJS
      ..style.float = 'right'
      ..style.textDecoration = 'none'
      ..style.fontSize = '19px'
      ..style.fontWeight = 'bold'
      ..style.color = 'rgba(255,255,255,0.8)'
      ..style.margin = '4px 10px 10px 10px'
      ..title = 'Rotate Right'
      ..style.cursor = 'pointer';

    rotate.onClick.listen((e) {
      var img = dialog.children
          .whereType<HTMLElement>()
          .where((e) => e.isA<HTMLImageElement>() || e.isA<CanvasImageSource>())
          .first;

      late HTMLCanvasElement canvasRotated;

      if (img.isA<HTMLCanvasElement>()) {
        var canvas = img as HTMLCanvasElement;
        canvasRotated =
            rotateCanvasImageSource(img, canvas.width, canvas.height);
      } else if (img.isA<HTMLImageElement>()) {
        var img2 = img as HTMLImageElement;
        canvasRotated = rotateCanvasImageSource(
            img2, img2.naturalWidth, img2.naturalHeight);
      }

      var imgRotated = canvasToImageElement(canvasRotated);
      imgRotated.style.cssText = img.style.cssText;

      if (download != null) {
        // ignore: unsafe_html
        download.href = imgRotated.src;
      }

      var idx = dialog.children.indexOf(img);
      assert(idx >= 0);
      img.remove();
      dialog.insertChild(idx, imgRotated);
    });

    dialog.appendChild(rotate);
  }

  content
    ..style.maxWidth = '98vw'
    ..style.maxHeight = '90vh';

  dialog.appendChild(content);

  document.body!.appendChild(dialog);

  return dialog;
}