1.8.0

1.8.0

Author: benhatsor

about.md

@@ -0,0 +1,61 @@
+<h1 align="center">
+  <a href="https://codeit.codes"><img src="/icons/app-favicon.png" height="100" width="100"></a>
+  <br>
+  Codeit
+</h1>
+<p align="center">
+  <h3 align="center">  
+    Mobile code editor connected to Git
+  </h3>
+</p>
+
+<p align="center">
+  <a href="https://codeit.codes"><img src="/icons/social/tryit.svg" width="32" height="26"></a>
+  <a href="https://discord.gg/47RFy3Vfmg"><img src="/icons/social/discordapp.svg" width="26" height="26"></a>
+  <a href="https://twitter.com/codeitcodes"><img src="/icons/social/twitter.svg" width="36" height="26"></a>
+</p>
+
+<h2>Features</h2>
+<ul>
+  <li>Uses blazing-fast web APIs. <a href="#details">More technical details below.</a></li>
+  <li>Framework-free. Only library is PrismJS, for syntax highlighting.</li>
+  <li>PWA support. Weighs 70% less than regular apps, can be installed and works offline.</li>
+  <li>Autosaving down to the character helps you pick up right where you left off. Code, scroll and caret positions, and location in your repos.</li>
+  <li>Supports 275 lanugages. Most common languages are preloaded by default, with uncommon languages loaded dynamically.</li>
+  <li>Codeit is built for Chrome on Android, Windows, macOS and Linux, as well as Safari on iOS.</li>
+</ul>
+
+<h2 id="details">Technical details</h2>
+
+<h3>The Codeit Editor</h3>
+
+The editor utilizes:
+
+<ul>
+  
+  <li>The <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/contenteditable"><code>contenteditable</code> API</a>, to enable editing the actual highlighted HTML. Compare this to other code editors, such as Visual Studio Code, Atom, or CodeMirror, which use an invisible overlaid textarea on top of the highlighted HTML, and constantly synchronize the textarea and DOM. Codeit's approach might be more preformant, as no synchronizing between textarea and DOM is required.</li>
+  
+  <li>The <a href="https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver"><code>MutationObserver</code> API</a>, to quickly detect changes in the DOM without an event listener. Changes from JavaScript will be detected automatically by the editor, without the need to run an <code>update</code> function.</li>
+  
+  <li>The <a href="https://developer.mozilla.org/en-US/docs/Web/API/Range"><code>Range</code> API</a>, for optimized parsing of the DOM. Using the <code>contenteditable</code> API could have included a caveat, as by default, the browser reparses the entire DOM after every change. However, using the Range API has been proven succesful to optimize DOM parsing by directing the browser to parse only what has actually changed.</li>
+  
+</ul>
+
+The editor is <a href="/lib">fully standalone</a>, and is a library by itself. It includes multiple custom <a href="/lib">plugins</a> and <a href="https://github.com/PrismJS/prism/tree/master/themes">themes</a>.
+
+<h3>Security</h3>
+
+When you log in to Git, Codeit recives an authuntication token from your Git hosting provider.
+This token is saved on your device and is used to read and commit code.
+
+When you edit a file, Codeit saves a local copy of the file on your device.
+When you commit an edited file, it's local copy is deleted.
+
+<h3>Privacy</h3>
+
+We don't use cookies and don't collect any personal data.
+
+To install Codeit, we ask for the bare minimum. If cookies are disabled, your browser will block Codeit from installing a Service Worker, which is absolutely necessary for the app to function. For this reason, we ask you enable cookies on the Codeit site.
+
+<h2>Special Thanks</h2>
+Codeit's logo was created by <a href="https://twitter.com/sandorqi">@sandorqi</a>.

bottomfloat.js

@@ -8,7 +8,7 @@ function updateFloat() {
   saveSidebarStateLS();
 
   // show bottom floater
-  bottomFloat.classList.remove('hidden');
+  bottomWrapper.classList.remove('hidden');
 
   // if selected file is modified, show flag
   if (modifiedFiles[selectedFile.sha] &&
@@ -30,17 +30,22 @@ function updateFloat() {
 
 // open sidebar when clicked on button
 sidebarOpen.addEventListener('click', () => {
+  
+  // if bottom float isn't expanded
+  if (liveView.children.length == 0) {
+    
+    toggleSidebar(true);
+    saveSidebarStateLS();
 
-  toggleSidebar(true);
-  saveSidebarStateLS();
+    let selectedEl = fileWrapper.querySelector('.item.selected');
 
-  let selectedEl = fileWrapper.querySelector('.item.selected');
+    if (selectedEl) {
 
-  if (selectedEl) {
-
-    // scroll to selected file
-    selectedEl.scrollIntoViewIfNeeded();
+      // scroll to selected file
+      selectedEl.scrollIntoViewIfNeeded();
 
+    }
+    
   }
 
 })
@@ -99,13 +104,13 @@ if (isMobile) {
     if (st > lastScrollTop) {
 
       // hide bottom float
-      bottomFloat.classList.add('hidden');
+      bottomWrapper.classList.add('hidden');
 
       // if scrolled to bottom of codeit
       if ((st + cd.offsetHeight) >= cd.scrollHeight) {
 
         // show bottom float
-        bottomFloat.classList.remove('hidden');
+        bottomWrapper.classList.remove('hidden');
 
       }
 
@@ -115,7 +120,7 @@ if (isMobile) {
       if ((lastScrollTop - st) > 20) {
 
         // show bottom float
-        bottomFloat.classList.remove('hidden');
+        bottomWrapper.classList.remove('hidden');
 
       }
 

codedrop.js

@@ -15,11 +15,21 @@ function getFileLang(src) {
 
   src = src.replaceAll('\n', '');
 
-  var extension = (/\.(\w+)$/.exec(src) || [, 'none'])[1];
+  const extension = (/\.(\w+)$/.exec(src) || [, 'none'])[1];
   return EXTENSIONS[extension] || extension;
 
 }
 
+function splitFileName(src) {
+  
+  src = src.replaceAll('\n', '');
+
+  const extension = (/\.(\w+)$/.exec(src) || [, 'none'])[1];
+  return [src.replace(('.' + extension), ''), '.' + extension];
+  
+}
+
+
 function processFile(file) {
 
   const reader = new FileReader();

file.js

@@ -104,34 +104,45 @@ function updateModFileScrollPos(sha, scrollPos) {
 // store the updated file under old sha as key
 // and store the updated file under new sha as key
 // in modifiedFiles object for 1 minute after commit
-function onFileEclipsedInCache(oldSha, newSha) {
+function onFileEclipsedInCache(oldSha, newSha, newFile) {
 
   // if file element under old sha exists in HTML,
   // update it to the new sha
   const fileEl = fileWrapper.querySelector('.file[sha="' + oldSha + '"]');
   if (fileEl) setAttr(fileEl, 'sha', newSha);
 
 
-  // store the updated file under old sha as key
+  let fileToUpdate;
 
-  // find the eclipsed file
-  let fileToUpdate = modifiedFiles[oldSha];
+  // if old sha exists
+  if (oldSha) {
 
-  fileToUpdate.sha = newSha;
-  fileToUpdate.caretPos = [0, 0];
-  fileToUpdate.eclipsed = true;
-  
-  // if file to update is selected
-  if (selectedFile.sha === oldSha) {
+    // store the updated file under old sha as key
+
+    // find the eclipsed file
+    fileToUpdate = modifiedFiles[oldSha];
+
+    fileToUpdate.sha = newSha;
+    fileToUpdate.caretPos = [0, 0];
+    fileToUpdate.eclipsed = true;
+
+    // if file to update is selected
+    if (selectedFile.sha === oldSha) {
+
+      // update its content
+      // to the selected file contents
+      updateModFileContent(oldSha, selectedFile.content);
+
+      // update selected file sha to the new sha
+      selectedFile.sha = newSha;
+
+      updateSelectedFileLS();
+
+    }
 
-    // update its content
-    // to the selected file contents
-    updateModFileContent(oldSha, selectedFile.content);
+  } else {
 
-    // update selected file sha to the new sha
-    selectedFile.sha = newSha;
-     
-    updateSelectedFileLS();
+    fileToUpdate = newFile;
 
   }
 
@@ -147,9 +158,14 @@ function onFileEclipsedInCache(oldSha, newSha) {
   // set 1 minute timeout to remove updated files
   window.setTimeout(() => {
 
-    // remove the updated file under old sha as key
-    // from modifiedFiles
-    deleteModFile(oldSha);
+    // if old sha exists
+    if (oldSha) {
+
+      // remove the updated file under old sha as key
+      // from modifiedFiles
+      deleteModFile(oldSha);
+      
+    }
 
     // if not edited updated file under new sha as key
     // while in timeout (file is still eclipsed)
@@ -170,14 +186,22 @@ function setTimeoutForEclipsedFiles() {
 
   const eclipsedFiles = Object.values(modifiedFiles).filter(file => file.eclipsed);
 
+  // run on all eclipsed files
   eclipsedFiles.forEach(file => {
 
-    // set 1 minute timeout to remove updated files
+    // set 1 minute timeout to remove eclipsed file
     window.setTimeout(() => {
 
-      // remove the updated file under old sha as key
-      // from modifiedFiles
-      deleteModFile(file.sha);
+      // if not edited eclipsed file
+      // while in timeout (file is still eclipsed)
+      if (modifiedFiles[file.sha] &&
+          modifiedFiles[file.sha].eclipsed) {
+      
+        // remove the eclipsed file
+        // from modifiedFiles
+        deleteModFile(file.sha);
+        
+      }
 
     }, 65 * 1000); // 65s
 
@@ -199,6 +223,9 @@ function getLatestVersion(item) {
 
   function followTrail(crumb) {
 
+    if(typeof(modifiedFiles[crumb]) == 'undefined') //@@
+      return null;
+    
     // if version sha matches its key
     // (it dosen't point to another version)
     if (modifiedFiles[crumb].sha === crumb) {
@@ -210,7 +237,14 @@ function getLatestVersion(item) {
 
       // version sha points to another version,
       // follow the trail
-      return followTrail(modifiedFiles[crumb].sha);
+      let ret = followTrail(modifiedFiles[crumb].sha);
+      
+      if(ret == null){
+        // No file with this sha was found in modifiedFiles, return the file with latest bread crumb: //@@
+        return modifiedFiles[crumb];
+      }else{
+        return ret;
+      }
 
     }