height-harmony 1.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +220 -0
  3. package/dist/height-harmony-min.js +22 -0
  4. package/height-harmony.js +46 -0
  5. package/package.json +57 -0
package/LICENSE ADDED
@@ -0,0 +1,21 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2025 Byron Johnson
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
package/README.md ADDED
@@ -0,0 +1,220 @@
1
+ # Height Harmony
2
+
3
+ A lightweight, zero-dependency JavaScript utility for equalizing element heights.
4
+
5
+ ## Live Demo
6
+
7
+ **[View the interactive demo →](https://byronjohnson.github.io/height-harmony/demo/)**
8
+
9
+ ## Installation
10
+
11
+ ### NPM
12
+ ```bash
13
+ npm install height-harmony
14
+ ```
15
+
16
+ ```javascript
17
+ // ES6 Modules (recommended)
18
+ import heightHarmony from 'height-harmony';
19
+
20
+ // CommonJS
21
+ const heightHarmony = require('height-harmony');
22
+ ```
23
+
24
+ ### CDN
25
+
26
+ #### ES Modules (Modern Browsers)
27
+ ```html
28
+ <script type="module">
29
+ import heightHarmony from 'https://unpkg.com/height-harmony@latest/height-harmony.js';
30
+
31
+ // Use immediately
32
+ heightHarmony('.my-elements');
33
+ </script>
34
+ ```
35
+
36
+ #### Traditional Script Tag
37
+ ```html
38
+ <!-- Latest version -->
39
+ <script src="https://unpkg.com/height-harmony@latest/height-harmony-min.js"></script>
40
+
41
+ <!-- Specific version -->
42
+ <script src="https://unpkg.com/height-harmony@1.0.0/height-harmony-min.js"></script>
43
+ ```
44
+
45
+ ### Direct Download
46
+ ```html
47
+ <!-- ES Modules -->
48
+ <script type="module" src="height-harmony.js"></script>
49
+
50
+ <!-- Traditional script tag -->
51
+ <script src="height-harmony-min.js"></script>
52
+ ```
53
+
54
+ ## Basic Usage
55
+
56
+ ```javascript
57
+ // Apply equal heights to elements
58
+ heightHarmony('.card');
59
+ heightHarmony('.feature-box');
60
+ ```
61
+
62
+ ## Version Information
63
+
64
+ ```javascript
65
+ // Check the current version
66
+ console.log(heightHarmony.version); // "1.0.0"
67
+ ```
68
+
69
+ ## ES Module Usage
70
+
71
+ ### Browser ES Modules
72
+ ```html
73
+ <!DOCTYPE html>
74
+ <html>
75
+ <head>
76
+ <script type="module">
77
+ import heightHarmony from './height-harmony.js';
78
+
79
+ // Initialize when DOM is ready
80
+ document.addEventListener('DOMContentLoaded', function() {
81
+ heightHarmony('.card');
82
+ });
83
+
84
+ // Handle responsive behavior
85
+ window.addEventListener('resize', function() {
86
+ heightHarmony('.card');
87
+ });
88
+ </script>
89
+ </head>
90
+ <body>
91
+ <div class="card">Content 1</div>
92
+ <div class="card">Content 2</div>
93
+ <div class="card">Content 3</div>
94
+ </body>
95
+ </html>
96
+ ```
97
+
98
+ ### Node.js / Build Tools
99
+ ```javascript
100
+ // app.js
101
+ import heightHarmony from 'height-harmony';
102
+
103
+ // In your component
104
+ function initCards() {
105
+ heightHarmony('.product-card');
106
+ }
107
+
108
+ // Export for use in other modules
109
+ export { initCards };
110
+ ```
111
+
112
+ ### Module Bundlers (Webpack, Rollup, etc.)
113
+ ```javascript
114
+ // Works seamlessly with modern bundlers
115
+ import heightHarmony from 'height-harmony';
116
+
117
+ // Tree-shaking friendly
118
+ export function createCardGrid() {
119
+ heightHarmony('.grid-item');
120
+ }
121
+ ```
122
+
123
+ ## Responsive Support
124
+
125
+ ### ES Modules
126
+ ```javascript
127
+ import heightHarmony from 'height-harmony';
128
+
129
+ document.addEventListener('DOMContentLoaded', function() {
130
+ // Initial harmonization
131
+ heightHarmony('.card');
132
+
133
+ // Reapply on window resize
134
+ let resizeTimeout;
135
+ window.addEventListener('resize', function() {
136
+ clearTimeout(resizeTimeout);
137
+ resizeTimeout = setTimeout(function() {
138
+ heightHarmony('.card');
139
+ }, 150);
140
+ });
141
+
142
+ // Handle orientation changes on mobile
143
+ window.addEventListener('orientationchange', function() {
144
+ setTimeout(function() {
145
+ heightHarmony('.card');
146
+ }, 300);
147
+ });
148
+ });
149
+ ```
150
+
151
+ ### Traditional Script Tag
152
+ ```javascript
153
+ // Initialize on page load
154
+ document.addEventListener('DOMContentLoaded', function() {
155
+ heightHarmony('.card');
156
+ });
157
+
158
+ // Reapply on window resize
159
+ let resizeTimeout;
160
+ window.addEventListener('resize', function() {
161
+ clearTimeout(resizeTimeout);
162
+ resizeTimeout = setTimeout(function() {
163
+ heightHarmony('.card');
164
+ }, 150);
165
+ });
166
+ ```
167
+
168
+ ## Dynamic Content
169
+
170
+ ### ES Modules
171
+ ```javascript
172
+ import heightHarmony from 'height-harmony';
173
+
174
+ // After adding new content via AJAX/fetch
175
+ function addNewCards(data) {
176
+ // Add new elements to DOM
177
+ const container = document.getElementById('card-container');
178
+ data.forEach(item => {
179
+ const card = document.createElement('div');
180
+ card.className = 'card';
181
+ card.textContent = item.content;
182
+ container.appendChild(card);
183
+ });
184
+
185
+ // Harmonize heights after DOM update
186
+ setTimeout(function() {
187
+ heightHarmony('.card');
188
+ }, 10);
189
+ }
190
+ ```
191
+
192
+ ### Traditional Approach
193
+ ```javascript
194
+ // After adding new content
195
+ setTimeout(function() {
196
+ heightHarmony('.product-card');
197
+ }, 10);
198
+ ```
199
+
200
+ ## Browser Compatibility
201
+
202
+ ### ES Modules
203
+ - Chrome 61+
204
+ - Firefox 60+
205
+ - Safari 10.1+
206
+ - Edge 16+
207
+
208
+ ### Traditional Script Tag
209
+ - All modern browsers
210
+ - IE 9+
211
+
212
+ ## How It Works
213
+
214
+ 1. Resets all element heights to measure natural dimensions
215
+ 2. Finds the tallest element in the group
216
+ 3. Sets all elements to match the tallest height
217
+
218
+ ## License
219
+
220
+ MIT
package/dist/height-harmony-min.js ADDED
@@ -0,0 +1,22 @@
1
+ function heightHarmony(selector) {
2
+ const elements = document.querySelectorAll(selector);
3
+ if (elements.length === 0) return;
4
+ elements.forEach((element) => {
5
+ element.style.height = "0px";
6
+ });
7
+ requestAnimationFrame(() => {
8
+ let maxHeight = 0;
9
+ elements.forEach((element) => {
10
+ element.style.height = "";
11
+ const elementHeight = element.offsetHeight;
12
+ maxHeight = Math.max(maxHeight, elementHeight);
13
+ });
14
+ elements.forEach((element) => {
15
+ element.style.height = maxHeight + "px";
16
+ });
17
+ });
18
+ }
19
+ heightHarmony.version = "1.0.0";
20
+ export {
21
+ heightHarmony as default
22
+ };
package/height-harmony.js ADDED
@@ -0,0 +1,46 @@
1
+ /**
2
+ * Sets all matching elements to the same height (the height of the tallest element)
3
+ * @param {string} selector - CSS selector for the elements to harmonize
4
+ * @version 1.0.1
5
+ */
6
+ function heightHarmony(selector) {
7
+ // Get all matching elements
8
+ const elements = document.querySelectorAll(selector);
9
+
10
+ // Exit if no elements found
11
+ if (elements.length === 0) return;
12
+
13
+ // First pass: Reset all heights to 0px to clear any previous styling completely
14
+ elements.forEach(element => {
15
+ element.style.height = '0px';
16
+ });
17
+
18
+ // Use requestAnimationFrame for better browser synchronization
19
+ requestAnimationFrame(() => {
20
+ // Reset heights to auto to get natural heights
21
+ let maxHeight = 0;
22
+
23
+ // Find the maximum natural height
24
+ elements.forEach(element => {
25
+ // Reset to empty string to get natural height
26
+ element.style.height = '';
27
+
28
+ // Get the element's height
29
+ const elementHeight = element.offsetHeight;
30
+
31
+ // Update maxHeight if this element is taller
32
+ maxHeight = Math.max(maxHeight, elementHeight);
33
+ });
34
+
35
+ // Set all elements to the maximum height
36
+ elements.forEach(element => {
37
+ element.style.height = maxHeight + 'px';
38
+ });
39
+ });
40
+ }
41
+
42
+ // Add version information
43
+ heightHarmony.version = '1.0.0';
44
+
45
+ // Export the function as the default export
46
+ export default heightHarmony;
package/package.json ADDED
@@ -0,0 +1,57 @@
1
+ {
2
+ "name": "height-harmony",
3
+ "version": "1.0.1",
4
+ "description": "A lightweight, zero-dependency JavaScript utility for equalizing element heights",
5
+ "main": "dist/height-harmony-min.js",
6
+ "module": "height-harmony.js",
7
+ "exports": {
8
+ ".": {
9
+ "import": "./height-harmony.js",
10
+ "require": "./dist/height-harmony-min.js",
11
+ "browser": "./dist/height-harmony-min.js"
12
+ }
13
+ },
14
+ "browser": "dist/height-harmony-min.js",
15
+ "unpkg": "dist/height-harmony-min.js",
16
+ "jsdelivr": "dist/height-harmony-min.js",
17
+ "files": [
18
+ "height-harmony.js",
19
+ "dist/height-harmony-min.js",
20
+ "README.md",
21
+ "LICENSE"
22
+ ],
23
+ "scripts": {
24
+ "test": "echo \"Error: no test specified\" && exit 1",
25
+ "build": "vite build",
26
+ "dev": "vite build --watch",
27
+ "prepublishOnly": "npm run build"
28
+ },
29
+ "repository": {
30
+ "type": "git",
31
+ "url": "git+https://github.com/byronjohnson/height-harmony.git"
32
+ },
33
+ "homepage": "https://byronjohnson.github.io/height-harmony/demo",
34
+ "bugs": {
35
+ "url": "https://github.com/byronjohnson/height-harmony/issues"
36
+ },
37
+ "keywords": [
38
+ "javascript",
39
+ "height",
40
+ "equalize",
41
+ "responsive",
42
+ "css",
43
+ "utility",
44
+ "frontend",
45
+ "dom",
46
+ "elements"
47
+ ],
48
+ "author": "Byron Johnson",
49
+ "license": "MIT",
50
+ "devDependencies": {
51
+ "terser": "^5.44.0",
52
+ "vite": "^6.3.6"
53
+ },
54
+ "engines": {
55
+ "node": ">=0.10.0"
56
+ }
57
+ }