Codeit 3.4.4

Author: benhatsor

api-link-parser.js

@@ -99,35 +99,32 @@ function decodeLink(url) {
         // show file in live view
         linkData.openLive = true;
 
-      } else if (isEmbed) { // if link is embed
-        
-        // show file link
-        linkData.redirect = baseURL + '/full?dir=' +
-          linkData.user + ',' + linkData.repo +
-          ',' + linkData.contents +
-          '&file=' + linkData.file;
-          
-        linkData.redirectText = 'Open ' + linkData.user + '/' + linkData.repo + ' with Codeit';
-      
       } // else, show the file's code
 
     } else if (isEmbed) { // if linking to directory
                           // and link is embed
 
       // show directory link
-      linkData.redirect = baseURL + '/full?dir=' +
+      linkData.redirect = encodeURIComponent(
+        baseURL + '/full?dir=' +
         linkData.user + ',' + linkData.repo +
-        ',' + linkData.contents;
+        ',' + linkData.contents
+      );
 
-      linkData.redirectText = 'Open ' + linkData.user + '/' + linkData.repo + ' with Codeit';
+      linkData.redirectText = encodeURI(
+        'Open ' +
+        linkData.user + '/' +
+        linkData.repo.split(':')[0] +
+        ' with Codeit'
+      );
 
     }
 
   } else {
 
     // show codeit link
-    linkData.redirect = baseURL + '/full';
-    linkData.redirectText = 'Open Codeit';
+    linkData.redirect = encodeURIComponent(baseURL + '/full');
+    linkData.redirectText = encodeURI('Open Codeit');
 
   }
 
@@ -162,10 +159,7 @@ function decodeLink(url) {
 
     }
 
-  }
-  
-  if (isEmbed) resp += '&embed=true';
-  
+  }  
 
   return resp;
 

filebrowser.js

@@ -2821,7 +2821,9 @@ if (isDev) {
 
   learnDebug.counter = 0;
 
-  learnDebug.addEventListener('click', () => {
+  learnDebug.addEventListener('click', (e) => {
+    
+    e.preventDefault();
 
     learnDebug.counter++;
 

full.css

@@ -62,7 +62,7 @@ body cd-el {
   bottom: env(safe-area-inset-bottom, 0px);
   left: 0;
   right: 0;
-  height: calc(45px + 56px + 45px);
+  height: calc(45px + 56px + 45px); /* 35px */
   display: none;
   justify-content: center;
   transition: .4s var(--cubic-function);
@@ -966,18 +966,16 @@ body:not(.mobile) .sidebar .header .title .branch-icon:hover {
   opacity: 0.72;
 }
 
-.sidebar .header .title .branch-icon:active {
-  opacity: 1;
+.sidebar .header .title .branch-icon:not(.active):active,
+.sidebar .header .title .branch-icon.active {
+  opacity: 0.3 !important;
 }
 
-body:not(.mobile) .sidebar .header .title .branch-icon:active {
+body.mobile .sidebar .header .title .branch-icon:not(.active):active,
+body.mobile .sidebar .header .title .branch-icon.active {
   opacity: 0.27 !important;
 }
 
-.sidebar .header .title .branch-icon.active {
-  opacity: 1 !important;
-}
-
 .sidebar .header .roundbutton.add {
   margin: 0;
   margin-right: calc(20px - var(--spacing-1));
@@ -1637,14 +1635,13 @@ body.mobile .sidebar .button {
   line-height: 1.5;
   margin-top: 4.5px;
   transform: translateY(-7px);
-  top: 64px;
-  left: 222px;
+  top: 20px;
+  left: 20px;
   /* right: 20px; */
   padding: 2px;
-  min-width: 170px;
-  min-width: 135px;
+  min-width: 136px;
   max-width: 375px;
-  max-height: calc(100vh - 80px - 6px - env(safe-area-inset-bottom));
+  max-height: calc(100vh - 80px - 6px - env(safe-area-inset-bottom, 0px));
   pointer-events: none;
   transition: 0s .18s, .18s var(--bounce-function) opacity;
   opacity: 0;
@@ -1665,6 +1662,13 @@ body.mobile .sidebar .button {
   transition-property: transform, padding, opacity;
 }
 
+body.mobile .menu {
+  padding: 0;
+  min-width: 150px;
+  max-width: 389px;
+  max-height: calc(100vh - 80px - 6px - env(safe-area-inset-bottom, 0px) + 7px * 2);
+}
+
 body:not(.mobile) .menu::-webkit-scrollbar {
   width: 10px;
 }
@@ -1697,6 +1701,13 @@ body:not(.mobile) .menu::-webkit-scrollbar-thumb:not(:active):hover {
   grid-gap: 8.75px;
 }
 
+body.mobile .menu .icon {
+  position: relative;
+  padding: 10px 15.75px;
+  border-radius: 0;
+  transition: inherit;
+}
+
 .menu .icon.selected {
   color: hsl(164deg 91% 33%);
   font-weight: 500;
@@ -1710,6 +1721,29 @@ body:not(.mobile) .menu .icon:not(:active):hover {
   background: rgba(255,255,255,0.1);
 }
 
+body.mobile .menu:not(.visible) .icon {
+  padding: 10px 11.75px;
+}
+
+body.mobile .menu:not(.visible) .icon:first-of-type {
+  padding-top: 6px;
+}
+
+body.mobile .menu:not(.visible) .icon:last-of-type {
+  padding-bottom: 6px;
+}
+
+body.mobile .menu .icon:not(:last-of-type)::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: -0.5px;
+  height: 1px;
+  background: rgb(32 34 37 / 60%);
+  pointer-events: none;
+}
+
 .menu .icon a {
   overflow: hidden;
   white-space: nowrap;
@@ -1718,7 +1752,7 @@ body:not(.mobile) .menu .icon:not(:active):hover {
 }
 
 body.mobile .menu .icon a {
-  max-width: calc(100vw - 16px - 7px - 147px - 11px);
+  max-width: calc(100vw - 16px - 7px - 147px - 19.5px);
 }
 
 .menu .icon:not(.selected) .branch-icon {

full.html

@@ -24,12 +24,7 @@
 
   <meta property="twitter:title" content="Codeit | Mobile code editor connected to Git">
   <meta property="twitter:site" content="@codeitcodes">
-  <meta property="twitter:site:id" content="@codeitcodes">
-  <meta property="twitter:creator" content="@codeitcodes">
-  <meta property="twitter:creator:id" content="@codeitcodes">
   <meta name="twitter:card" content="summary">
-  <meta property="twitter:domain" content="codeit.codes">
-  <meta property="twitter:url" content="https://codeit.codes/">
   <meta name="twitter:description" content="Run projects, code your ideas, and share it all on Codeit.">
   <meta name="twitter:image" content="https://codeit.codes/images/banner-og.png">
 
@@ -39,6 +34,7 @@
   <meta name="next-head-count" content="24">
   <meta name="robots" content="all">
   <meta name="google" content="notranslate">
+  <script>if (window !== top && !document.referrer.startsWith(window.location.origin)) { window.location.href = '/redirect' }</script>
   <script defer data-domain="codeit.codes" src="https://plausible.io/js/plausible.js"></script>
 
   <link rel="shortcut icon" href="/icons/android-app-512.png">

homepage/lang.html

@@ -101,8 +101,10 @@
       text-rendering: optimizeLegibility;
       font-feature-settings: "kern";
       -webkit-font-feature-settings: "kern";
-      touch-action: manipulation;
+      font-synthesis: none;
       overscroll-behavior: none;
+      user-select: text;
+      -webkit-user-select: text;
       -webkit-touch-callout: none;
       -webkit-font-smoothing: antialiased;
       -webkit-tap-highlight-color: transparent;
@@ -113,23 +115,21 @@
 
   </style>
 
-  <meta name="description" content="Codeit runs on the web, open source, and free. Supports HTML, CSS, JavaScript, Python, Bootstrap, XML and more. Easy to use without how to.">
+  <meta name="description" content="Run projects, code your ideas, and share it all on Codeit.">
 
-  <meta property="og:title" content="Codeit | Mobile code editor connected to Git">
-  <meta property="og:description" content="Codeit runs on the web, open source, and free. Supports HTML, CSS, JavaScript, Python, Bootstrap, XML and more. Easy to use without how to.">
+  <meta property="og:title" content="Codeit - Supported languages">
+  <meta property="og:description" content="Run projects, code your ideas, and share it all on Codeit.">
   <meta property="og:url" content="https://codeit.codes">
   <meta property="og:image" content="https://codeit.codes/images/banner-og.png">
-  <meta property="og:type" content="application">
-  <meta property="og:site_name" content="Codeit Code Editor">
+  <meta property="og:type" content="website">
+  <meta property="og:site_name" content="Codeit">
 
-  <meta property="twitter:title" content="Codeit | Mobile code editor connected to Git">
-  <meta property="twitter:account_id" content="1484271514543345665">
-  <meta name="twitter:card" content="summary_large_image">
-  <meta property="twitter:domain" content="codeit.codes">
-  <meta property="twitter:url" content="https://codeit.codes">
-  <meta name="twitter:description" content="Codeit runs on the web, open source, and free. Supports HTML, CSS, JavaScript, Python, Bootstrap, XML and more. Easy to use without how to.">
+  <meta property="twitter:title" content="Codeit - Supported languages">
+  <meta property="twitter:site" content="@codeitcodes">
+  <meta name="twitter:card" content="summary">
+  <meta name="twitter:description" content="Run projects, code your ideas, and share it all on Codeit.">
   <meta name="twitter:image" content="https://codeit.codes/images/banner-og.png">
-
+  
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="referrer" content="origin-when-cross-origin">
   <script defer="" data-domain="codeit.codes" src="https://plausible.io/js/plausible.js"></script>

homepage/privacy.html

@@ -101,8 +101,10 @@
       text-rendering: optimizeLegibility;
       font-feature-settings: "kern";
       -webkit-font-feature-settings: "kern";
-      touch-action: manipulation;
+      font-synthesis: none;
       overscroll-behavior: none;
+      user-select: text;
+      -webkit-user-select: text;
       -webkit-touch-callout: none;
       -webkit-font-smoothing: antialiased;
       -webkit-tap-highlight-color: transparent;
@@ -113,23 +115,21 @@
 
   </style>
 
-  <meta name="description" content="Codeit runs on the web, open source, and free. Supports HTML, CSS, JavaScript, Python, Bootstrap, XML and more. Easy to use without how to.">
+  <meta name="description" content="Run projects, code your ideas, and share it all on Codeit.">
 
-  <meta property="og:title" content="Codeit | Mobile code editor connected to Git">
-  <meta property="og:description" content="Codeit runs on the web, open source, and free. Supports HTML, CSS, JavaScript, Python, Bootstrap, XML and more. Easy to use without how to.">
+  <meta property="og:title" content="Codeit - Privacy policy">
+  <meta property="og:description" content="Run projects, code your ideas, and share it all on Codeit.">
   <meta property="og:url" content="https://codeit.codes">
   <meta property="og:image" content="https://codeit.codes/images/banner-og.png">
-  <meta property="og:type" content="application">
-  <meta property="og:site_name" content="Codeit Code Editor">
+  <meta property="og:type" content="website">
+  <meta property="og:site_name" content="Codeit">
 
-  <meta property="twitter:title" content="Codeit | Mobile code editor connected to Git">
-  <meta property="twitter:account_id" content="1484271514543345665">
-  <meta name="twitter:card" content="summary_large_image">
-  <meta property="twitter:domain" content="codeit.codes">
-  <meta property="twitter:url" content="https://codeit.codes">
-  <meta name="twitter:description" content="Codeit runs on the web, open source, and free. Supports HTML, CSS, JavaScript, Python, Bootstrap, XML and more. Easy to use without how to.">
+  <meta property="twitter:title" content="Codeit - Privacy policy">
+  <meta property="twitter:site" content="@codeitcodes">
+  <meta name="twitter:card" content="summary">
+  <meta name="twitter:description" content="Run projects, code your ideas, and share it all on Codeit.">
   <meta name="twitter:image" content="https://codeit.codes/images/banner-og.png">
-
+  
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="referrer" content="origin-when-cross-origin">
   <script defer="" data-domain="codeit.codes" src="https://plausible.io/js/plausible.js"></script>
@@ -140,7 +140,7 @@
   <img class="logo" src="/icons/iphone-app-180.png" width="80" draggable="false" alt="Codeit">
   <p class="title">Privacy policy</p>
 
-  <div style="display: inline-block;line-height: 1.5;">Codeit dosen't collect data.<br>Your code stays on your device. <br>Codeit uses <a href="https://plausible.io">Plausible</a> to get stats. <br><a href="https://plausible.io/codeit.codes?period=all">See the stats.</a></div>
+  <div style="display: inline-block;line-height: 1.5;">Codeit dosen't use cookies or collect any personal data.<br>Your code stays on your device.<br><br>Codeit uses <a href="https://plausible.io/data-policy">Plausible</a>, an open source project, to get stats.<br><a href="https://plausible.io/codeit.codes?period=all">See the stats.</a></div>
   <p style="margin-top: 50px;margin-bottom: 50px;">
     <a href="/" style="color: inherit;">- ❤️ Codeit team</a>
   </p>

index.html

@@ -25,12 +25,7 @@
 
   <meta property="twitter:title" content="Codeit | Mobile code editor connected to Git">
   <meta property="twitter:site" content="@codeitcodes">
-  <meta property="twitter:site:id" content="@codeitcodes">
-  <meta property="twitter:creator" content="@codeitcodes">
-  <meta property="twitter:creator:id" content="@codeitcodes">
   <meta name="twitter:card" content="summary">
-  <meta property="twitter:domain" content="codeit.codes">
-  <meta property="twitter:url" content="https://codeit.codes/">
   <meta name="twitter:description" content="Run projects, code your ideas, and share it all on Codeit.">
   <meta name="twitter:image" content="https://codeit.codes/images/banner-og.png">
 

live-view/live-view.js

@@ -373,15 +373,11 @@ function addBottomSwipeListener() {
   let swiped = false;
 
   let direction = 0;
-
+  
   bottomWrapper.addEventListener('touchstart', dragStart, false);
   bottomWrapper.addEventListener('touchend', dragEnd, false);
   bottomWrapper.addEventListener('touchmove', drag, false);
-
-  bottomWrapper.addEventListener('mousedown', dragStart, false);
-  bottomWrapper.addEventListener('mouseup', dragEnd, false);
-  bottomWrapper.addEventListener('mousemove', drag, false);
-
+  
   function dragStart(e) {
 
     if (e.type === 'touchstart') {
@@ -435,6 +431,39 @@ function addBottomSwipeListener() {
 
       }
 
+    } else if (click) { // if clicked and bottom float not expanded
+      
+      // if clicked the bottom float's swipe hitbox
+      // but not the bottom float itself
+      if (e.target === bottomWrapper) {
+                
+        // get caret range from point
+        
+        // disable bottom float hitbox
+        bottomWrapper.style.pointerEvents = 'none';
+        
+        const pointX = e.changedTouches[0].clientX,
+              pointY = e.changedTouches[0].clientY;
+        
+        const range = document.caretRangeFromPoint(pointX, pointY);
+        
+        bottomWrapper.style.pointerEvents = '';
+        
+        // if range exists
+        if (range) {
+          
+          e.preventDefault();
+          
+          // select range
+          
+          const sel = window.getSelection();
+          
+          sel.setBaseAndExtent(range.startContainer, range.startOffset, range.endContainer, range.endOffset);
+          
+        }
+        
+      }
+      
     }
 
     yOffset = 0;
@@ -1043,7 +1072,7 @@ async function renderLiveViewHTML(file) {
   if (!workerClientId) await workerInstallPromise;
 
 
-  liveView.innerHTML = `<iframe src="`+ livePath + '?' + workerClientId + '/' +`" name="Live view" title="Live view" class="live-frame" allow="accelerometer; camera; encrypted-media; display-capture; geolocation; gyroscope; microphone; midi; clipboard-read; clipboard-write; web-share; payment" allowfullscreen="true" allowtransparency="true" loading="eager" sandbox="allow-downloads allow-forms allow-modals allow-pointer-lock allow-popups allow-presentation allow-scripts allow-same-origin"></iframe>`;
+  liveView.innerHTML = `<iframe src="`+ livePath + '?' + workerClientId + '/' +`" name="Live view" title="Live view" class="live-frame" allow="accelerometer; camera; encrypted-media; display-capture; geolocation; gyroscope; microphone; midi; clipboard-read; clipboard-write; payment" allowfullscreen="true" allowtransparency="true" loading="eager" sandbox="allow-downloads allow-forms allow-modals allow-pointer-lock allow-popups allow-presentation allow-scripts allow-same-origin"></iframe>`;
 
 
   liveFile = file;