Merge pull request #244 from codeitcodes/patch-1

Patch 1

Author: benhatsor

LICENSE

@@ -1,3 +1,3 @@
-Codeit is licensed under the GNU-GPL v3 or any later version.
+Codeit is licensed under the GNU-GPL v3.
 For more info, see: https://gnu.org/licenses/gpl-3.0
 Copyright (C) 2022 Codeit contributors

filebrowser.js

@@ -1422,6 +1422,8 @@ async function loadFileInHTML(fileEl, fileSha) {
 
       resp = { content: fileSizeText };
 
+      cd.textContent = '';
+
       // if on mobile device
       if (isMobile) {
 
@@ -1438,7 +1440,6 @@ async function loadFileInHTML(fileEl, fileSha) {
       } else {
 
         liveToggle.classList.add('file-open');
-        updateScrollbarArrow();
 
         onNextFrame(() => {
           liveView.classList.remove('notransition');
@@ -1583,7 +1584,6 @@ function loadBinaryFileHTML(file, toggled) {
     if (!isMobile) {
 
       liveToggle.classList.add('file-open');
-      updateScrollbarArrow();
 
     }
 
@@ -1945,6 +1945,18 @@ sidebarTitle.addEventListener('click', (e) => {
 
     sidebar.classList.add('learn');
 
+    
+    // if adding a repository
+    
+    const focusedRepo = fileWrapper.querySelector('.repo.focused');
+    
+    if (focusedRepo) {
+      
+      // remove it
+      focusedRepo.remove();
+      
+    }
+    
     /*
     // if there are no modified files
     // and no pending promises
@@ -3010,6 +3022,7 @@ function onEditorScroll() {
 
 }
 
+
 function updateScrollbarArrow() {
 
   // if codeit is horizontally scrollable
@@ -3027,6 +3040,10 @@ function updateScrollbarArrow() {
 
 }
 
+// when codeit resizes, update
+new ResizeObserver(updateScrollbarArrow).observe(cd);
+
+
 // check for meta key (Ctrl/Command)
 function isKeyEventMeta(event) {
   return event.metaKey || event.ctrlKey;
@@ -3217,8 +3234,6 @@ function setupEditor() {
   cd.on('scroll', onEditorScroll);
   cd.on('caretmove', saveSelectedFileCaretPos);
 
-  if (!isMobile) cd.on('type', updateScrollbarArrow);
-
   // update on screen resize
 
   const landscape = window.matchMedia('(orientation: landscape)');
@@ -3372,7 +3387,7 @@ function setupEditor() {
           if (shownMessages.beautifySelect < 2) {
 
             // show beautify select message
-            showMessage('Try selecting some text.', 3500);
+            showMessage('Try selecting some text first.', 4100);
 
             // bump counter
             shownMessages.beautifySelect++;
@@ -3440,7 +3455,6 @@ function updateLineNumbersHTML() {
 
   if (!isMobile) {
 
-    updateScrollbarArrow();
     updateLiveViewArrow();
 
   }

full.css

@@ -467,6 +467,7 @@ body.notransition .live-view.file-open {
   width: 100%;
   height: 100%;
   background: #fff;
+  border: 0;
   max-width: unset;
 }
 
@@ -1791,7 +1792,8 @@ body:not(.mobile) .live-view-menu {
   align-items: center;
   justify-content: center;
   pointer-events: none;
-  transform: scale(0.94);
+  transform: scale(1.08);
+  transform: scale(1.075);
   transform-origin: center;
   transition: 0s .18s;
 }
@@ -1809,14 +1811,14 @@ body.mobile .dialog-background {
 .dialog {
   background: var(--deep-midnight-blue);
   color: #dcddde;
-  box-shadow: 0 2px 10px 0 rgb(0 0 0 / 20%);
-  border: 1px solid rgb(32 34 37 / 60%);
+  box-shadow: 0 8px 16px rgb(0 0 0 / 24%);
   border-radius: 11.5px;
   line-height: 1.5;
   opacity: 0;
-  padding: 2px;
+  padding: 9px;
   transition: 0s .18s, .18s var(--bounce-function) opacity;
   min-width: 170px;
+  overflow: hidden;
 }
 
 .dialog-wrapper.visible .dialog {
@@ -1832,23 +1834,71 @@ body.mobile .dialog-background {
 }
 
 .dialog .button-wrapper {
+  position: relative;
   display: flex;
   margin-top: 7px;
 }
 
+body.mobile .dialog .button-wrapper {
+  margin: -7px;
+  margin-top: 8px;
+}
+
+body.mobile .dialog .button-wrapper::before {
+  content: '';
+  position: absolute;
+  top: -1px;
+  left: 0;
+  right: 0;
+  height: 1px;
+  background: rgb(32 34 37 / 60%);
+  transition: inherit;
+  pointer-events: none;
+}
+
+body.mobile .dialog-wrapper:not(.visible) .button-wrapper::before {
+  left: -2px;
+  right: -2px;
+}
+
 .dialog .button {
   padding: 8px 14px;
   border-radius: 5.75px;
   display: flex;
   justify-content: center;
+  position: relative;
   flex: 1;
 }
 
+body.mobile .dialog .button {
+  border-radius: 0;
+}
+
 .dialog .cancel {
   color: hsl(228deg 16% 37%);
 }
 
-.dialog-wrapper.one-button .dialog .cancel {
+.dialog-wrapper.one-button .button.cancel {
+  display: none;
+}
+
+body.mobile .dialog .cancel::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: -0.5px;
+  width: 1px;
+  background: rgb(32 34 37 / 60%);
+  transition: inherit;
+  pointer-events: none;
+}
+
+body.mobile .dialog-wrapper:not(.visible) .button.cancel::after {
+  bottom: -2px;
+}
+
+body.mobile .dialog-wrapper.one-button .button.cancel::after {
   display: none;
 }
 
@@ -1868,7 +1918,7 @@ body:not(.mobile) .dialog .button:not(:active):hover {
 .dialog-background {
   position: fixed;
   inset: 0;
-  background: rgba(0,0,0,0.85);
+  background: hsl(227deg 11% 16% / 40%);
   width: calc(var(--sidebar-width) - 1px);
   opacity: 0;
   transition: .18s var(--bounce-function);

lib/plugins/codeit-autocomplete.js

@@ -231,6 +231,8 @@ acp.lang.css.init = () => {
   CSSProps.push('overflow');
   CSSProps.push('transition');
   CSSProps.push('animation');
+  CSSProps.push('inset');
+  CSSProps.push('border-radius');
   CSSProps.push('-webkit-user-select');
 
   acp.lang.css.props = CSSProps;
@@ -592,6 +594,10 @@ acp.utils.shouldAutocomplete = () => {
   if (input !== document.activeElement) return false;
 
   const cursor = input.dropper.cursor();
+  
+  // if cursor dosen't exist, return
+  if (!cursor) return false;
+  
   const cursorCollapsed = cursor.collapsed;
 
   // if cursor not collapsed, return

lib/plugins/codeit-autolinker.js

@@ -70,13 +70,14 @@
 				var isMac = navigator.platform.indexOf('Mac') > -1;
 
 				env.attributes.href = href.replaceAll('\'','').replaceAll('"','').replaceAll('`','');
-				env.attributes.onclick = 'if ((event.ctrlKey || event.metaKey) && event.shiftKey) { event.preventDefault(); window.open(this.href, "_blank") }';
+        
+        			env.attributes.onclick = 'if ((event.ctrlKey || event.metaKey) && event.shiftKey) { event.preventDefault(); window.open(this.href, "_blank") }';
 				env.attributes.title = isMac ? '⌘ + ⇧ + click to open link' : 'Ctrl + Shift + click to open link';
 
-				// Silently catch any error thrown by decodeURIComponent (#1186)
+				// silently catch any error thrown by decodeURIComponent
 				try {
 					env.content = decodeURIComponent(env.content);
-				} catch (e) { /* noop */ }
+				} catch (e) {}
 			}
 		}
 	});

live-view/live-view.js

@@ -355,14 +355,6 @@ async function setupLiveView() {
     // update line numbers
     updateLineNumbersHTML();
 
-    // if on desktop
-    if (!isMobile) {
-
-      // update scrollbar arrow
-      updateScrollbarArrow();
-
-    }
-
   }
 
 }
@@ -1014,11 +1006,8 @@ async function handleLiveViewRequest(requestPath) {
 async function renderLiveViewHTML(file) {
 
   // if iOS version is lower than minimum
-  
-  const isSafariWithMac = (navigator.userAgent.toLowerCase().includes('safari')
-                           && !navigator.userAgent.toLowerCase().includes('chrome'));
-  
-  if (isSafariWithMac) {
+
+  if (isSafari) {
 
     const safariVersion = Number(navigator.userAgent.split('Version/')[1].split(' Safari')[0]);
 
@@ -1028,9 +1017,8 @@ async function renderLiveViewHTML(file) {
 
       liveView.innerHTML = `
       <div class="prompt">
-        <svg style="margin-bottom: 7px;margin-top: -42px;" class="file-svg" viewBox="0 0 752 752" version="1.1" height="146" width="146" xmlns="http://www.w3.org/2000/svg"><defs><clipPath id="a"><path d="m139.21 139.21h473.58v473.58h-473.58z"></path></clipPath></defs><g clip-path="url(#a)"><path d="m356.27 572.35v-38.492c0-10.898 8.7578-19.73 19.73-19.73 10.898 0 19.734 8.7578 19.734 19.73v38.492c93.223-9.2539 167.36-83.395 176.62-176.62h-38.492c-10.898 0-19.73-8.7578-19.73-19.734 0-10.898 8.7578-19.73 19.73-19.73h38.492c-9.2539-93.227-83.395-167.36-176.62-176.62v38.496c0 10.895-8.7578 19.73-19.734 19.73-10.898 0-19.73-8.7578-19.73-19.73v-38.496c-93.227 9.2578-167.36 83.395-176.62 176.62h38.496c10.895 0 19.73 8.7578 19.73 19.73 0 10.898-8.7578 19.734-19.73 19.734h-38.496c9.2578 93.223 83.395 167.36 176.62 176.62zm19.73 40.441c-130.77 0-236.79-106.02-236.79-236.79 0-130.77 106.02-236.79 236.79-236.79 130.78 0 236.79 106.02 236.79 236.79 0 130.78-106.02 236.79-236.79 236.79zm88.371-333.09c10.426-3.1719 16.32 2.6562 13.133 13.133l-37.344 122.7c-3.1758 10.426-14.148 21.434-24.625 24.625l-122.7 37.344c-10.426 3.1719-16.32-2.6562-13.133-13.133l37.344-122.7c3.1719-10.426 14.148-21.438 24.625-24.625zm-111.21 75.098c0.69141-0.20703 1.0391-0.23047 1.2148-0.23828 0.19531-0.36328 0.21875-0.71094 0.42578-1.4023l-21.543 70.793 70.789-21.547c-0.69141 0.21094-1.0391 0.23438-1.2148 0.23828-0.19141 0.36328-0.21484 0.71094-0.42578 1.4023l21.547-70.789z" fill="hsl(223deg 75% 38%)"></path></g></svg>
         <div class="title">Upgrade iOS to run this file</div>
-        <a class="desc link" href="https://support.apple.com/en-us/HT204416" target="_blank">Here's how</a>
+        <a class="desc link" href="https://support.apple.com/kb/HT204204" target="_blank">Here's how</a>
       </div>
       `;
 
@@ -1055,20 +1043,14 @@ 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" allowfullscreen="true" allowpaymentrequest="true" loading="lazy" sandbox="allow-downloads allow-forms allow-modals allow-pointer-lock allow-popups allow-presentation allow-same-origin allow-scripts allow-top-navigation-by-user-activation" scrolling="yes" frameborder="0"></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; 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>`;
 
 
   liveFile = file;
 
 
   const liveFrame = liveView.querySelector('.live-frame');
 
-  liveFrame.contentWindow.addEventListener('DOMContentLoaded', () => {
-
-    liveFrame.contentWindow.history.replaceState({}, 'Live view', livePath);
-    
-  });
-
   liveFrame.contentWindow.addEventListener('load', () => {
 
     liveView.classList.add('loaded');

utils.js

@@ -109,7 +109,7 @@ function stopLoading() {
 
 let messageTimeout;
 
-function showMessage(message, duration) {
+let showMessage = (message, duration) => {
 
   // if message includes an icon
   if (message.icon) {
@@ -158,15 +158,15 @@ function showMessage(message, duration) {
 
 }
 
-function hideMessage() {
+let hideMessage = () => {
   messageEl.classList.remove('visible');
 }
 
 
 
 // show dialog
 
-function showDialog(confirmHandler, titleText, confirmText, showOneButton = false) {
+let showDialog = (confirmHandler, titleText, confirmText, showOneButton = false) => {
 
   return new Promise(resolve => {
 
@@ -227,7 +227,7 @@ function showDialog(confirmHandler, titleText, confirmText, showOneButton = fals
 
 }
 
-function hideDialog() {
+let hideDialog = () => {
 
   // hide dialog
   dialogWrapper.classList.remove('visible');
@@ -325,7 +325,7 @@ window.addEventListener('offline', () => { isOffline = true });
 
 let isPersistStorage = false;
 
-async function checkPersistStorage() {
+let checkPersistStorage = async () => {
 
   if (navigator.storage && navigator.storage.persist) {
 
@@ -345,6 +345,20 @@ async function checkPersistStorage() {
 checkPersistStorage();
 
 
+// escape HTML
+let escapeHTML = (str) => {
+  
+  const p = document.createElement('p');
+  p.appendChild(document.createTextNode(str));
+  
+  let resp = p.innerHTML;
+  resp = resp.replaceAll(/"/g, """).replaceAll(/'/g, "'");
+  
+  return resp;
+  
+}
+
+
 // base64 encode/decode
 
 let encodeUnicode = (str) => {

worker/client-channel.js

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