├── .gitignore
├── README.md
├── dist
    ├── index.d.ts
    └── index.js
├── package-lock.json
├── package.json
├── src
    └── index.ts
└── tsconfig.json


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | DS_Store


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Svelte Element Queries
 2 | 
 3 | ## @leveluptuts/svelte-element-query
 4 | 
 5 | ## Demo
 6 | 
 7 | [Demo](https://svelte.dev/repl/6868af406d2947bf838ad415b823883d?version=3.42.1)
 8 | 
 9 | ### Why Element / Container Queries
10 | 
11 | https://css-tricks.com/a-cornucopia-of-container-queries/
12 | 
13 | ### Usage
14 | 
15 | ```svelte
16 | 
17 | <script>
18 | 	import { container } from '@leveluptuts/svelte-element-query'
19 | </script>
20 | 
21 | <div class="contain" use:container={{small: 0, medium: 200, large: 500}}>
22 | 	<h1>Hello</h1>
23 | </div>
24 | 
25 | <style>
26 | 	.contain {
27 | 		border: dashed 5px var(--borderColor, #333);
28 | 	}
29 | 
30 | 	:global(.medium) {
31 | 		--borderColor: red;
32 | 	}
33 | 
34 | 	:global(.large) {
35 | 		--borderColor: blue;
36 | 	}
37 | </style>
38 | 
39 | ```
40 | 
41 | ## Sponsors
42 | 
43 | ### Level Up Tutorials
44 | 
45 | https://www.leveluptutorials.com
46 | 
47 | Cutting-edge, focused & high quality video tutorials for web developers and designers
48 | Syntax
49 | 
50 | Learn Svelte!
51 | 
52 | ### https://syntax.fm/
53 | 
54 | A Tasty Treats Podcast for Web Developers. Ft Wes Bos & Scott Tolinski
55 | 
56 | Thank you!


--------------------------------------------------------------------------------
/dist/index.d.ts:
--------------------------------------------------------------------------------
1 | export declare const container: (node: HTMLElement, sizes?: {
2 |     [k: string]: number;
3 | }) => {
4 |     destroy: () => void;
5 | };
6 | 


--------------------------------------------------------------------------------
/dist/index.js:
--------------------------------------------------------------------------------
 1 | // Changes css class based on the container's size.
 2 | export const container = (
 3 | 	node,
 4 | 	sizes = {
 5 | 		'sec-small': 0,
 6 | 		'sec-medium': 200,
 7 | 		'sec-large': 400,
 8 | 	}
 9 | ) => {
10 | 	const ro = new ResizeObserver(() => {
11 | 		const nodeSize = node.getBoundingClientRect().width
12 | 		let activeClass = ''
13 | 		for (const property in sizes) {
14 | 			if (nodeSize > sizes[property]) activeClass = property
15 | 			node.classList.remove(property)
16 | 		}
17 | 		if (activeClass) node.classList.add(activeClass)
18 | 	})
19 | 	ro.observe(node)
20 | 	return {
21 | 		destroy() {
22 | 			ro.disconnect()
23 | 		},
24 | 	}
25 | }
26 | 


--------------------------------------------------------------------------------
/package-lock.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "svelte-element-query",
 3 |   "version": "1.0.0",
 4 |   "lockfileVersion": 2,
 5 |   "requires": true,
 6 |   "packages": {
 7 |     "": {
 8 |       "version": "1.0.0",
 9 |       "license": "ISC",
10 |       "dependencies": {
11 |         "typescript": "^4.3.5"
12 |       }
13 |     },
14 |     "node_modules/typescript": {
15 |       "version": "4.3.5",
16 |       "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.3.5.tgz",
17 |       "integrity": "sha512-DqQgihaQ9cUrskJo9kIyW/+g0Vxsk8cDtZ52a3NGh0YNTfpUSArXSohyUGnvbPazEPLu398C0UxmKSOrPumUzA==",
18 |       "bin": {
19 |         "tsc": "bin/tsc",
20 |         "tsserver": "bin/tsserver"
21 |       },
22 |       "engines": {
23 |         "node": ">=4.2.0"
24 |       }
25 |     }
26 |   },
27 |   "dependencies": {
28 |     "typescript": {
29 |       "version": "4.3.5",
30 |       "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.3.5.tgz",
31 |       "integrity": "sha512-DqQgihaQ9cUrskJo9kIyW/+g0Vxsk8cDtZ52a3NGh0YNTfpUSArXSohyUGnvbPazEPLu398C0UxmKSOrPumUzA=="
32 |     }
33 |   }
34 | }
35 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"author": "Scott Tolinski",
 3 | 	"description": "A Svelte Action for using element queries",
 4 | 	"devDependencies": {
 5 | 		"typescript": "^5.1.3"
 6 | 	},
 7 | 	"exports": {
 8 | 		".": "./dist/index.js"
 9 | 	},
10 | 	"keywords": [
11 | 		"svelte",
12 | 		"actions",
13 | 		"css"
14 | 	],
15 | 	"license": "ISC",
16 | 	"main": "./dist/index.js",
17 | 	"name": "@leveluptuts/svelte-element-query",
18 | 	"prepublishOnly": "npm run tsc",
19 | 	"scripts": {
20 | 		"build": "tsc",
21 | 		"test": "echo \"Error: no test specified\" && exit 1"
22 | 	},
23 | 	"type": "module",
24 | 	"types": "./dist/index.d.ts",
25 | 	"version": "1.0.5"
26 | }
27 | 


--------------------------------------------------------------------------------
/src/index.ts:
--------------------------------------------------------------------------------
 1 | // Changes css class based on the container's size.
 2 | export const container = (
 3 |   node: HTMLElement,
 4 |   sizes: { [k: string]: number } = {
 5 |     "sec-small": 0,
 6 |     "sec-medium": 200,
 7 |     "sec-large": 400,
 8 |   }
 9 | ): { destroy: () => void } => {
10 |   const ro = new ResizeObserver(() => {
11 |     const nodeSize = node.getBoundingClientRect().width;
12 |     let activeClass = "";
13 |     for (const property in sizes) {
14 |       if (nodeSize > sizes[property]) activeClass = property;
15 |       node.classList.remove(property);
16 |     }
17 |     if (activeClass) node.classList.add(activeClass);
18 |   });
19 | 
20 |   ro.observe(node);
21 | 
22 |   return {
23 |     destroy() {
24 |       ro.disconnect();
25 |     },
26 |   };
27 | };
28 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"compilerOptions": {
 3 | 		/* Visit https://aka.ms/tsconfig.json to read more about this file */
 4 | 
 5 | 		/* Basic Options */
 6 | 		// "incremental": true,                         /* Enable incremental compilation */
 7 | 		"target": "ES2015",
 8 | 		"module": "ES2020",
 9 | 
10 | 		"declaration": true /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */,
11 | 		"outDir": "./dist" /* Redirect output structure to the directory. */,
12 | 		"rootDir": "./src" /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */,
13 | 
14 | 		/* Strict Type-Checking Options */
15 | 		"strict": true /* Enable all strict type-checking options. */,
16 | 		/* Module Resolution Options */
17 | 		// "moduleResolution": "node",                  /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
18 | 		// "baseUrl": "./",                             /* Base directory to resolve non-absolute module names. */
19 | 		// "paths": {},                                 /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
20 | 		// "rootDirs": [],                              /* List of root folders whose combined content represents the structure of the project at runtime. */
21 | 		// "typeRoots": [],                             /* List of folders to include type definitions from. */
22 | 		// "types": [],                                 /* Type declaration files to be included in compilation. */
23 | 		// "allowSyntheticDefaultImports": true,        /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
24 | 		"esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */,
25 | 		// "preserveSymlinks": true,                    /* Do not resolve the real path of symlinks. */
26 | 		// "allowUmdGlobalAccess": true,                /* Allow accessing UMD globals from modules. */
27 | 
28 | 		/* Source Map Options */
29 | 		// "sourceRoot": "",                            /* Specify the location where debugger should locate TypeScript files instead of source locations. */
30 | 		// "mapRoot": "",                               /* Specify the location where debugger should locate map files instead of generated locations. */
31 | 		// "inlineSourceMap": true,                     /* Emit a single file with source maps instead of having a separate file. */
32 | 		// "inlineSources": true,                       /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */
33 | 
34 | 		/* Experimental Options */
35 | 		// "experimentalDecorators": true,              /* Enables experimental support for ES7 decorators. */
36 | 		// "emitDecoratorMetadata": true,               /* Enables experimental support for emitting type metadata for decorators. */
37 | 
38 | 		/* Advanced Options */
39 | 		"skipLibCheck": true /* Skip type checking of declaration files. */,
40 | 		"forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */
41 | 	}
42 | }
43 | 


--------------------------------------------------------------------------------