sam/Quill
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

323: Making VSCode snippets for templates

Browse Source
This commit is contained in:
metacryst
2023-09-02 14:54:01 -05:00
parent be710e127a
commit cb70af8832
6 changed files with 125 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored Normal file
View File

@@ -0,0 +1 @@
.DS_Store

2
VSCode/package-lock.json generated
View File

@@ -1,5 +1,5 @@
{
"name": "es6-string-html",
"version": "1.0",
"version": "1.0.1",
"lockfileVersion": 1
}

8
VSCode/package.json
View File

@@ -2,7 +2,7 @@
"name": "quill",
"displayName": "Quill",
"description": "HTML/CSS Syntax highlighting, best used with the Quill framework",
"version": "1.0.0",
"version": "1.0.1",
"publisher": "capturedsun",
"icon": "docs/Quill.png",
"engines": {
@@ -48,6 +48,12 @@
"category": "HTML"
}
],
"snippets": [
{
"language": "javascript",
"path": "./snippets.json"
}
],
"grammars": [
{
"injectTo": [

BIN
VSCode/quill-1.0.1.vsix Normal file
View File

Binary file not shown.

71
VSCode/snippets.json Normal file
View File

@@ -0,0 +1,71 @@
{
"html": {
"prefix": "html",
"body": [
"html(`$1`);"
],
"description": "Create a DOM node"
},
"dom": {
"prefix": "dom",
"body": [
"dom;"
],
"description": "Use the DOM collection of functions"
},
"*element": {
"prefix": "*element",
"body": [
"class Index extends HTMLElement {",
"",
" css = /*css*/ `",
" index-el {",
" ",
" }",
" `",
"",
" html = /*html*/ `",
" `",
"",
" constructor() {",
" super();",
" quill.addStyle(this.css);",
" this.innerHTML = this.html;",
" }",
"",
" connectedCallback() {",
" }",
"",
"}",
"",
"customElements.define('index-el', Index);",
"export default Index;"
],
"description": "Custom Element Template"
},
"*page": {
"prefix": "*page",
"body": [
"<!DOCTYPE html>",
"<html lang=\"en\">",
" <head>",
" <title>Index</title>",
" <script type=\"module\">",
" import * as quill from './Quill/quill.js';",
" window.quill = {};",
" Object.entries(quill).forEach(([name, exported]) => window[name] = exported);",
" </script>",
" <script type=\"module\" src=\"index.js\"></script>",
" </head>",
" <body>",
"",
"",
" </body>",
"</html>"
],
"description": "Use the DOM collection of functions"
}
}

38
quill.js
View File

@@ -1,11 +1,47 @@
export function addStyle(cssString) {
if(quill.detectMobile() || quill.getSafariVersion() < 16.4) {
let container = document.querySelector("style#quillStyles");
if(!container) {
container = document.createElement('style');
container.id = "quillStyles";
document.head.appendChild(container);
}
let primarySelector = cssString.substring(0, cssString.indexOf("{")).trim();
primarySelector = primarySelector.replace(/\*/g, "all");
let stylesheet = container.querySelector(`:scope > style#${primarySelector}`)
if(!stylesheet) {
stylesheet = document.createElement('style');
stylesheet.id = primarySelector;
stylesheet.appendChild(document.createTextNode(cssString));
container.appendChild(stylesheet);
} else {
stylesheet.innerText = cssString
}
return;
}
let stylesheet = new CSSStyleSheet();
stylesheet.replaceSync(cssString)
document.adoptedStyleSheets = [...document.adoptedStyleSheets, stylesheet];
}
export function html(elementString) {
export function createElement(elementString) {
let parser = new DOMParser();
let doc = parser.parseFromString(elementString, 'text/html');
return doc.body.firstChild;
}
export function detectMobile() {
const mobileDeviceRegex = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i;
return mobileDeviceRegex.test(navigator.userAgent);
}
export function getSafariVersion() {
const userAgent = navigator.userAgent;
const isSafari = userAgent.includes("Safari") && !userAgent.includes("Chrome");
if (isSafari) {
const safariVersionMatch = userAgent.match(/Version\/(\d+\.\d+)/);
const safariVersion = safariVersionMatch ? parseFloat(safariVersionMatch[1]) : null;
return safariVersion;
}
}