Allow full-width (full screen)

Author: coatless

R/examplesWebR.R

@@ -638,6 +638,34 @@ webr_inline_css <- function() {
     '.rocleteer-webr-iframe-container {',
     '  display: none;',
     '}',
+    '.rocleteer-webr-container.rocleteer-webr-fullwidth {',
+    '  position: fixed;',
+    '  top: 0;',
+    '  left: 0;',
+    '  width: 100vw;',
+    '  height: 100vh;',
+    '  z-index: var(--rocleteer-webr-fullwidth-z-index, 1050);',
+    '  margin: 0;',
+    '  border-radius: 0;',
+    '  border: none;',
+    '  overflow: auto;',
+    '  background-color: var(--_container-bg);',
+    '  transition: all 0.3s ease-in-out;',
+    '}',
+    '.rocleteer-webr-container.rocleteer-webr-fullwidth .rocleteer-webr-iframe {',
+    '  height: calc(100vh - 180px) !important;',
+    '  border: none;',
+    '}',
+    '.rocleteer-webr-fullwidth-backdrop {',
+    '  position: fixed;',
+    '  top: 0;',
+    '  left: 0;',
+    '  width: 100vw;',
+    '  height: 100vh;',
+    '  background-color: rgba(0, 0, 0, 0.5);',
+    '  z-index: var(--rocleteer-webr-backdrop-z-index, 1040);',
+    '  display: none;',
+    '}',
     '.rocleteer-webr-iframe-controls {',
     '  margin-bottom: 12px;',
     '}',
@@ -664,10 +692,17 @@ webr_inline_css <- function() {
     '  .rocleteer-webr-iframe-controls .rocleteer-webr-btn {',
     '    display: inline-block;',
     '    margin: 0 4px 0 0;',
+    '    font-size: 12px;',
+    '    padding: 6px 12px;',
+    '  }',
+    '  .rocleteer-webr-container.rocleteer-webr-fullwidth {',
+    '    padding: 8px;',
+    '  }',
+    '  .rocleteer-webr-container.rocleteer-webr-fullwidth .rocleteer-webr-iframe {',
+    '    height: calc(100vh - 120px) !important;',
     '  }',
     '}',
-    '</style>',
-    collapse = "\n"
+    '</style>'
   )
 }
 
@@ -782,7 +817,7 @@ webr_repl_iframe <- function(encoded_code, version = "latest", height = 300, mod
   iframe_id <- paste0("webr_iframe_", hashed_id)
 
   html <- paste0(
-    # Include CSS
+    # Include CSS once
     webr_inline_css(),
 
     '<div class="rocleteer-webr-container">',
@@ -793,7 +828,7 @@ webr_repl_iframe <- function(encoded_code, version = "latest", height = 300, mod
     # Initial buttons (before iframe loads)
     '<div id="', iframe_id, '_initial" class="rocleteer-webr-initial">',
     '<p class="rocleteer-webr-initial-text">Interactive Example Available</p>',
-    '<button onclick="loadWebRIframe(\'', iframe_id, '\', \'', url, '\', ', height, ')" ',
+    '<button onclick="loadWebRIframe(\'', iframe_id, '\', \'', url, '\', ', height, ', false)" ',
     'class="rocleteer-webr-btn rocleteer-webr-btn-success rocleteer-webr-btn-try">',
     '\U0001F680 Try it in your browser</button>',
     '<button onclick="window.open(\'', url, '\', \'_blank\')" ',
@@ -807,6 +842,10 @@ webr_repl_iframe <- function(encoded_code, version = "latest", height = 300, mod
     '<button onclick="hideWebRIframe(\'', iframe_id, '\')" ',
     'class="rocleteer-webr-btn rocleteer-webr-btn-secondary rocleteer-webr-btn-back">',
     '\U0001F519 Go back</button>',
+    '<button onclick="toggleWebRFullWidth(\'', iframe_id, '\')" ',
+    'class="rocleteer-webr-btn rocleteer-webr-btn-primary rocleteer-webr-btn-toggle" ',
+    'id="', iframe_id, '_toggle">',
+    '\U00026F6 Full Screen</button>',
     '<button onclick="window.open(\'', url, '\', \'_blank\')" ',
     'class="rocleteer-webr-btn rocleteer-webr-btn-primary rocleteer-webr-btn-open">',
     '\U0001F310 Open in Tab</button>',
@@ -818,18 +857,59 @@ webr_repl_iframe <- function(encoded_code, version = "latest", height = 300, mod
 
     # JavaScript for iframe management
     '<script>',
-    'function loadWebRIframe(id, url, height) {',
+    'function loadWebRIframe(id, url, height, fullwidth) {',
+    '  fullwidth = fullwidth || false;',
     '  document.getElementById(id + "_initial").style.display = "none";',
     '  document.getElementById(id + "_container").style.display = "block";',
     '  document.getElementById(id + "_content").innerHTML = ',
     '    \'<iframe src="\' + url + \'" class="rocleteer-webr-iframe" height="\' + height + \'px" \' +',
     '    \'title="webR REPL"></iframe>\';',
+    '  if (fullwidth) {',
+    '    enterWebRFullWidth(id);',
+    '  }',
     '}',
     'function hideWebRIframe(id) {',
+    '  exitWebRFullWidth(id);',
     '  document.getElementById(id + "_initial").style.display = "block";',
     '  document.getElementById(id + "_container").style.display = "none";',
     '  document.getElementById(id + "_content").innerHTML = "";',
     '}',
+    'function toggleWebRFullWidth(id) {',
+    '  var container = document.getElementById(id + "_container").closest(".rocleteer-webr-container");',
+    '  if (container.classList.contains("rocleteer-webr-fullwidth")) {',
+    '    exitWebRFullWidth(id);',
+    '  } else {',
+    '    enterWebRFullWidth(id);',
+    '  }',
+    '}',
+    'function enterWebRFullWidth(id) {',
+    '  var container = document.getElementById(id + "_container").closest(".rocleteer-webr-container");',
+    '  var backdrop = document.createElement("div");',
+    '  backdrop.className = "rocleteer-webr-fullwidth-backdrop";',
+    '  backdrop.id = id + "_backdrop";',
+    '  backdrop.onclick = function() { exitWebRFullWidth(id); };',
+    '  document.body.appendChild(backdrop);',
+    '  backdrop.style.display = "block";',
+    '  container.classList.add("rocleteer-webr-fullwidth");',
+    '  document.body.style.overflow = "hidden";',
+    '  var toggleBtn = document.getElementById(id + "_toggle");',
+    '  if (toggleBtn) {',
+    '    toggleBtn.innerHTML = "\\u274C Exit Full Screen";',
+    '  }',
+    '}',
+    'function exitWebRFullWidth(id) {',
+    '  var container = document.getElementById(id + "_container").closest(".rocleteer-webr-container");',
+    '  var backdrop = document.getElementById(id + "_backdrop");',
+    '  if (backdrop) {',
+    '    backdrop.remove();',
+    '  }',
+    '  container.classList.remove("rocleteer-webr-fullwidth");',
+    '  document.body.style.overflow = "";',
+    '  var toggleBtn = document.getElementById(id + "_toggle");',
+    '  if (toggleBtn) {',
+    '    toggleBtn.innerHTML = "\\u26F6 Full width";',
+    '  }',
+    '}',
     '</script>'
   )