Merge pull request #232 from codeitcodes/patch-2

Author: benhatsor

bottomfloat.js

@@ -115,6 +115,25 @@ if (isMobile) {
     bottomWrapper.classList.remove('hidden');
 
   });
+  
+  
+  // update on screen resize
+  
+  bottomWrapper.style.setProperty('--window-height', window.innerHeight + 'px');
+
+  bottomWrapper.lastHeight = 0;
+
+  window.addEventListener('resize', () => {
+
+    if (bottomWrapper.lastHeight === window.innerHeight) {
+      return;
+    }
+
+    bottomWrapper.lastHeight = window.innerHeight;
+    
+    bottomWrapper.style.setProperty('--window-height', window.innerHeight + 'px');
+
+  });
 
 }
 
@@ -134,13 +153,13 @@ function checkBottomFloat() {
     bottomWrapper.classList.add('hidden');
 
     // if scrolled to bottom of codeit
-    if (cd.scrollTop >= (cd.scrollHeight - cd.offsetHeight)) {
+    if (cd.scrollTop >= (cd.scrollHeight - cd.offsetHeight - 1)) {
 
       // set timeout
       window.setTimeout(() => {
 
         // if still on bottom of codeit
-        if (cd.scrollTop >= (cd.scrollHeight - cd.offsetHeight)) {
+        if (cd.scrollTop >= (cd.scrollHeight - cd.offsetHeight - 1)) {
 
           // show bottom float
           bottomWrapper.classList.remove('hidden');

filebrowser.js

@@ -2690,6 +2690,15 @@ learnAbout.addEventListener('click', () => {
 
 });
 
+// copy version when clicked
+versionEl.addEventListener('click', () => {
+
+  copy(version).then(() => {
+    showMessage('Copied version!');
+  });
+
+});
+
 // share codeit on click of button
 learnShare.addEventListener('click', () => {
 
@@ -2722,8 +2731,29 @@ learnClose.addEventListener('click', () => {
 })
 
 
+sidebar.trTimeout = null;
+
 // toggle the sidebar
 function toggleSidebar(open) {
+  
+  if (sidebar.trTimeout) window.clearTimeout(sidebar.trTimeout);
+  
+  if (body.classList.contains('notransition')) {
+    
+    sidebar.classList.remove('transitioning');
+    
+  } else {
+  
+    sidebar.classList.add('transitioning');
+    
+    sidebar.trTimeout = window.setTimeout(() => {
+  
+      sidebar.classList.remove('transitioning');
+  
+    }, 400);
+    
+  }
+  
 
   if (open) {
 
@@ -2763,7 +2793,7 @@ function toggleSidebar(open) {
     }
 
   }
-
+  
 }
 
 
@@ -3039,7 +3069,7 @@ function setupEditor() {
 
   // update on screen resize
 
-  let lastWidth = undefined;
+  let lastWidth;
 
   window.addEventListener('resize', () => {
 

full.css

@@ -59,7 +59,7 @@ body cd-el {
 
 .bottom-wrapper {
   position: fixed;
-  bottom: env(safe-area-inset-bottom, 0px);
+  bottom: 0;
   left: 0;
   right: 0;
   height: calc(45px + 56px + 45px);
@@ -81,29 +81,18 @@ body.notransition .bottom-wrapper {
 }
 
 .bottom-wrapper.expanded {
-  transform: translateY(calc(-100vh + 100% - env(safe-area-inset-top, 0px)));
+  transform: translateY(calc(-1 * var(--window-height, 100vh) + 44px + env(safe-area-inset-top, 0px)));
   height: 44px;
 }
 
-.bottom-wrapper.expanded.fromtop {
-  top: env(safe-area-inset-top, 0px);
-  bottom: auto;
-  transform: none;
-  transition: none;
-}
-
-.bottom-wrapper.expanded.fromtop * {
-  transition: none !important;
-}
-
 .bottom-wrapper.notransition, .bottom-wrapper.notransition * {
   transition: none !important;
 }
 
 .bottom-float {
   position: relative;
   margin: 45px 0;
-  width: calc(100% - 45px - env(safe-area-inset-left));
+  width: calc(100% - 45px);
   max-width: 600px;
   display: flex;
   align-items: center;
@@ -145,6 +134,7 @@ body.notransition .bottom-wrapper {
 
 .bottom-wrapper.expanded .bottom-float .sidebar-open {
   padding: 11px 16px;
+  background: transparent;
 }
 
 .bottom-float .sidebar-open:active {
@@ -737,7 +727,6 @@ body.expanded .sidebar-toggle svg .left {
   padding-left: env(safe-area-inset-left);
   padding-right: 1px;
   box-sizing: border-box;
-  will-change: transform;
   z-index: 998;
 }
 
@@ -755,6 +744,10 @@ body.expanded .sidebar-toggle svg .left {
 }
 */
 
+.sidebar.transitioning {
+  will-change: transform;
+}
+
 body.expanded .sidebar {
   transform: translateX(calc(100% - 1px));
   pointer-events: auto;
@@ -795,7 +788,7 @@ body.notransition .sidebar {
 
 .sidebar .loader {
   position: sticky;
-  top: 0;
+  top: 0.5px;
   left: 0;
   height: 2px;
   width: var(--sidebar-width);
@@ -917,7 +910,7 @@ body.notransition .sidebar {
 .sidebar .header .logo::after {
   content: '';
   position: absolute;
-  right: 0;
+  right: -0.5px;
   width: 28px;
   height: 20px;
   background: linear-gradient(270deg, #1a1c24, #1a1c2400);
@@ -930,7 +923,7 @@ body.notransition .sidebar {
 .sidebar .header .logo::before {
   right: auto;
   background: linear-gradient(90deg, #1a1c24, #1a1c2400);
-  left: 42px;
+  left: 41.5px;
 }
 
 .sidebar .header .logo::after {
@@ -1437,6 +1430,12 @@ body:not(.mobile) .sidebar .header .title .branch-icon:active {
   background: hsl(228deg 59% 6% / 50%);
 }
 
+@media screen and (orientation: landscape) {
+  body.mobile .sidebar .picture-wrapper {
+    display: none;
+  }
+}
+
 .sidebar .intro {
   position: absolute;
   width: calc(100% - 1px);
@@ -1451,6 +1450,10 @@ body:not(.mobile) .sidebar .header .title .branch-icon:active {
   padding-left: 10px;
 }
 
+body.mobile .sidebar .intro {
+  margin-left: calc(-1 * env(safe-area-inset-left, 0px));
+}
+
 .sidebar .files .intro {
   height: calc(100% - 74px);
   margin-top: -11px;
@@ -1610,11 +1613,6 @@ body.mobile .sidebar .button {
   align-items: center;
 }
 
-.sidebar .learn-wrapper .version {
-  user-select: text;
-  -webkit-user-select: text;
-}
-
 .sidebar .learn-wrapper .logout {
   display: none;
 }
@@ -2384,6 +2382,10 @@ body:not(.mobile) .sidebar .header .logo::-webkit-scrollbar {
   height: 10px;
 }
 
+body.mobile .sidebar .header .logo::-webkit-scrollbar {
+  opacity: 0;
+}
+
 body:not(.mobile) .sidebar .header .logo::-webkit-scrollbar-track {
   background: transparent;
   box-shadow: none;
@@ -2581,3 +2583,4 @@ html, body {
   }
 
 }
+

lib/plugins/codeit-autocomplete.js

@@ -30,6 +30,7 @@ CSSProps.push('border');
 CSSProps.push('flex');
 CSSProps.push('grid');
 CSSProps.push('gap');
+CSSProps.push('background');
 CSSProps.push('-webkit-user-select');
 
 const maxChar = 0;//4;

live-view/live-view.js

@@ -38,9 +38,6 @@ async function setupLiveView() {
         // expand bottom float
         bottomWrapper.classList.add('expanded');
 
-        // fix bottom float on safari
-        if (isSafari) bottomWrapper.classList.add('fromtop');
-
         // restore transition on next frame
         onNextFrame(() => {
           bottomWrapper.classList.remove('notransition');
@@ -175,9 +172,6 @@ async function setupLiveView() {
           // close bottom float
           bottomWrapper.classList.remove('expanded');
 
-          // fix bottom float on safari
-          if (isSafari) bottomWrapper.classList.remove('fromtop');
-
           // restore transition on next frame
           onNextFrame(() => {
             bottomWrapper.classList.remove('notransition');
@@ -426,31 +420,8 @@ function addBottomSwipeListener() {
         e.preventDefault();
         e.stopPropagation();
 
-        // fix bottom float on safari
-        if (isSafari) {
-
-          bottomWrapper.classList.remove('fromtop');
-          bottomWrapper.classList.add('notransition');
-
-          onNextFrame(() => {
-
-            bottomWrapper.classList.remove('notransition');
-
-            onNextFrame(() => {
-
-              // retract bottom float
-              bottomWrapper.classList.remove('expanded');
-
-            });
-
-          });
-
-        } else {
-
-          // retract bottom float
-          bottomWrapper.classList.remove('expanded');
-
-        }
+        // retract bottom float
+        bottomWrapper.classList.remove('expanded');
 
         toggleLiveView(selectedFile);
 
@@ -518,18 +489,6 @@ function addBottomSwipeListener() {
           // expand bottom float
           bottomWrapper.classList.add('expanded');
 
-          // fix bottom float on safari
-          // when finished transitioning
-          if (isSafari) {
-
-            window.setTimeout(() => {
-
-              bottomWrapper.classList.add('fromtop');
-
-            }, 400);
-
-          }
-
           // if live view is closed
           if (!liveViewToggle) toggleLiveView(selectedFile);
 
@@ -541,31 +500,8 @@ function addBottomSwipeListener() {
         if (swiped && bottomWrapper.classList.contains('expanded')
             && !bottomFloat.classList.contains('file-open')) {
 
-          // fix bottom float on safari
-          if (isSafari) {
-
-            bottomWrapper.classList.remove('fromtop');
-            bottomWrapper.classList.add('notransition');
-
-            onNextFrame(() => {
-
-              bottomWrapper.classList.remove('notransition');
-
-              onNextFrame(() => {
-
-                // retract bottom float
-                bottomWrapper.classList.remove('expanded');
-
-              });
-
-            });
-
-          } else {
-
-            // retract bottom float
-            bottomWrapper.classList.remove('expanded');
-
-          }
+          // retract bottom float
+          bottomWrapper.classList.remove('expanded');
 
           // if live view is open
           if (liveViewToggle) toggleLiveView(selectedFile);
@@ -1146,7 +1082,7 @@ async function renderLiveViewHTML(file) {
 // render live view for Markdown files
 async function renderLiveViewMarkdown(file) {
 
-  liveView.innerHTML = '<iframe srcdoc="<!DOCTYPE html><html><head></head><body></body></html>" name="Live view" title="Live view" style="background: hsl(228deg 16% 12%);" class="live-frame" loading="lazy" scrolling="yes" frameborder="0"></iframe>';
+  liveView.innerHTML = '<iframe srcdoc="<!DOCTYPE html><html><head></head><body ontouchstart></body></html>" name="Live view" title="Live view" style="background: hsl(228deg 16% 12%);" class="live-frame" loading="lazy" scrolling="yes" frameborder="0"></iframe>';
 
   const liveFrame = liveView.querySelector('.live-frame');
 

worker/client-channel.js

@@ -4,7 +4,7 @@
 
 
 // update worker name when updating worker
-const WORKER_NAME = 'codeit-worker-v586';
+const WORKER_NAME = 'codeit-worker-v599';
 
 
 // internal paths