carnationpoints 1.0.4 → 1.0.5
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.
- package/README.md +150 -125
- package/index.html +30 -0
- package/package.json +71 -71
package/README.md
CHANGED
|
@@ -1,125 +1,150 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html lang="en">
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="UTF-8" />
|
|
5
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
6
|
-
<meta
|
|
7
|
-
name="keywords"
|
|
8
|
-
content="responsive breakpoints, responsive design, viewport Breakpoints, Adaptive Breakpoints, breakpoints, media queries, window resize,custom breakpoint, layout breakpoints, dynamic breakpoints javascript,mobile first,Flex Breakpoints"
|
|
9
|
-
/>
|
|
10
|
-
</head>
|
|
11
|
-
<body>
|
|
12
|
-
<h1>Carnation Breakpoints</h1>
|
|
13
|
-
<h2>Notes</h2>
|
|
14
|
-
<p>This is pure javascript plugin no require jquery dependency. </p>
|
|
15
|
-
<p>Carnation Breakpoints is a lightweight JavaScript plugin that helps you manage responsive breakpoints in your web applications. It allows you to define custom breakpoints, listen for changes in viewport size, and execute callback functions when the viewport enters or exits specific breakpoints.</p>
|
|
16
|
-
|
|
17
|
-
<h3>Package Managers</h3>
|
|
18
|
-
<p>https://www.npmjs.com/package/carnationpoints</p>
|
|
19
|
-
|
|
20
|
-
```js
|
|
21
|
-
# NPM
|
|
22
|
-
npm i carnationpoints
|
|
23
|
-
```
|
|
24
|
-
|
|
25
|
-
<h3>Define carnationPoints()</h3>
|
|
26
|
-
<p>Returns detected layout points from the selected element.</p>
|
|
27
|
-
|
|
28
|
-
```js
|
|
29
|
-
const points = carnationPoints(".myBox");
|
|
30
|
-
```
|
|
31
|
-
|
|
32
|
-
<h3>Create Breakpoints</h3>
|
|
33
|
-
<p>Define your own breakpoints based on your layout requirements.</p>
|
|
34
|
-
<p>Supports custom min/max widths for mobile, tablet, desktop, or any device range.</p>
|
|
35
|
-
|
|
36
|
-
```js
|
|
37
|
-
const points = carnationPoints(".myBox", {
|
|
38
|
-
breakpoints: [
|
|
39
|
-
{ name: "mobile", max: 767 },
|
|
40
|
-
{ name: "tablet", min: 768, max: 1023 },
|
|
41
|
-
{ name: "desktop", min: 1024 },
|
|
42
|
-
],
|
|
43
|
-
});
|
|
44
|
-
```
|
|
45
|
-
<h3>Get Breakpoint on Init</h3>
|
|
46
|
-
<p>Initializes layout detection using custom breakpoints.</p>
|
|
47
|
-
<p>Triggers onInit callback with the active breakpoint on load.</p>
|
|
48
|
-
|
|
49
|
-
```js
|
|
50
|
-
const points = carnationPoints(".myBox", {
|
|
51
|
-
breakpoints: [
|
|
52
|
-
{ name: "mobile", max: 767 },
|
|
53
|
-
{ name: "tablet", min: 768, max: 1023 },
|
|
54
|
-
{ name: "desktop", min: 1024 },
|
|
55
|
-
],
|
|
56
|
-
onInit(point) {
|
|
57
|
-
console.log("Init:", point.breakpoint);
|
|
58
|
-
},
|
|
59
|
-
});
|
|
60
|
-
```
|
|
61
|
-
|
|
62
|
-
<h3>Get Breakpoint on Resize</h3>
|
|
63
|
-
<p>Detects layout changes using custom breakpoints.</p>
|
|
64
|
-
<p>Triggers onChange callback when the active breakpoint changes on resize.</p>
|
|
65
|
-
|
|
66
|
-
```js
|
|
67
|
-
const points = carnationPoints(".myBox", {
|
|
68
|
-
breakpoints: [
|
|
69
|
-
{ name: "mobile", max: 767 },
|
|
70
|
-
{ name: "tablet", min: 768, max: 1023 },
|
|
71
|
-
{ name: "desktop", min: 1024 },
|
|
72
|
-
],
|
|
73
|
-
onChange(point) {
|
|
74
|
-
console.log("Resize:", point.breakpoint);
|
|
75
|
-
},
|
|
76
|
-
});
|
|
77
|
-
```
|
|
78
|
-
|
|
79
|
-
<h3>Add new breakpoints</h3>
|
|
80
|
-
<p>Adds additional custom breakpoints dynamically using addPoint.</p>
|
|
81
|
-
|
|
82
|
-
```js
|
|
83
|
-
const points = carnationPoints(".myBox", {
|
|
84
|
-
breakpoints: [
|
|
85
|
-
{ name: "mobile", max: 767 },
|
|
86
|
-
{ name: "tablet", min: 768, max: 1023 },
|
|
87
|
-
{ name: "desktop", min: 1024 },
|
|
88
|
-
],
|
|
89
|
-
});
|
|
90
|
-
|
|
91
|
-
points.addPoint([
|
|
92
|
-
{ name: "lg", min: 1200 },
|
|
93
|
-
{ name: "xl", min: 1600 },
|
|
94
|
-
]);
|
|
95
|
-
```
|
|
96
|
-
|
|
97
|
-
<h3>Destroy breakpoints</h3>
|
|
98
|
-
<p>Cleans up listeners and removes all breakpoint observers using destroy.</p>
|
|
99
|
-
|
|
100
|
-
```js
|
|
101
|
-
const points = carnationPoints(".myBox", {
|
|
102
|
-
breakpoints: [
|
|
103
|
-
{ name: "mobile", max: 767 },
|
|
104
|
-
{ name: "tablet", min: 768, max: 1023 },
|
|
105
|
-
{ name: "desktop", min: 1024 },
|
|
106
|
-
],
|
|
107
|
-
});
|
|
108
|
-
|
|
109
|
-
points.destroy();
|
|
110
|
-
```
|
|
111
|
-
|
|
112
|
-
<h3>Use Event</h3>
|
|
113
|
-
<p>Listens for breakpoint change events on the target element.</p>
|
|
114
|
-
<p>Executes logic when the active breakpoint changes.</p>
|
|
115
|
-
|
|
116
|
-
```js
|
|
117
|
-
points.el.addEventListener("breakpoint:change", function (e) {
|
|
118
|
-
if (e.detail.breakpoint === "mobile") {
|
|
119
|
-
console.log("Mobile active");
|
|
120
|
-
}
|
|
121
|
-
});
|
|
122
|
-
```
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
</
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8" />
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
6
|
+
<meta
|
|
7
|
+
name="keywords"
|
|
8
|
+
content="responsive breakpoints, responsive design, viewport Breakpoints, Adaptive Breakpoints, breakpoints, media queries, window resize,custom breakpoint, layout breakpoints, dynamic breakpoints javascript,mobile first,Flex Breakpoints"
|
|
9
|
+
/>
|
|
10
|
+
</head>
|
|
11
|
+
<body>
|
|
12
|
+
<h1>Carnation Breakpoints</h1>
|
|
13
|
+
<h2>Notes</h2>
|
|
14
|
+
<p>This is pure javascript plugin no require jquery dependency. </p>
|
|
15
|
+
<p>Carnation Breakpoints is a lightweight JavaScript plugin that helps you manage responsive breakpoints in your web applications. It allows you to define custom breakpoints, listen for changes in viewport size, and execute callback functions when the viewport enters or exits specific breakpoints.</p>
|
|
16
|
+
|
|
17
|
+
<h3>Package Managers</h3>
|
|
18
|
+
<p>https://www.npmjs.com/package/carnationpoints</p>
|
|
19
|
+
|
|
20
|
+
```js
|
|
21
|
+
# NPM
|
|
22
|
+
npm i carnationpoints
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
<h3>Define carnationPoints()</h3>
|
|
26
|
+
<p>Returns detected layout points from the selected element.</p>
|
|
27
|
+
|
|
28
|
+
```js
|
|
29
|
+
const points = carnationPoints(".myBox");
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
<h3>Create Breakpoints</h3>
|
|
33
|
+
<p>Define your own breakpoints based on your layout requirements.</p>
|
|
34
|
+
<p>Supports custom min/max widths for mobile, tablet, desktop, or any device range.</p>
|
|
35
|
+
|
|
36
|
+
```js
|
|
37
|
+
const points = carnationPoints(".myBox", {
|
|
38
|
+
breakpoints: [
|
|
39
|
+
{ name: "mobile", max: 767 },
|
|
40
|
+
{ name: "tablet", min: 768, max: 1023 },
|
|
41
|
+
{ name: "desktop", min: 1024 },
|
|
42
|
+
],
|
|
43
|
+
});
|
|
44
|
+
```
|
|
45
|
+
<h3>Get Breakpoint on Init</h3>
|
|
46
|
+
<p>Initializes layout detection using custom breakpoints.</p>
|
|
47
|
+
<p>Triggers onInit callback with the active breakpoint on load.</p>
|
|
48
|
+
|
|
49
|
+
```js
|
|
50
|
+
const points = carnationPoints(".myBox", {
|
|
51
|
+
breakpoints: [
|
|
52
|
+
{ name: "mobile", max: 767 },
|
|
53
|
+
{ name: "tablet", min: 768, max: 1023 },
|
|
54
|
+
{ name: "desktop", min: 1024 },
|
|
55
|
+
],
|
|
56
|
+
onInit(point) {
|
|
57
|
+
console.log("Init:", point.breakpoint);
|
|
58
|
+
},
|
|
59
|
+
});
|
|
60
|
+
```
|
|
61
|
+
|
|
62
|
+
<h3>Get Breakpoint on Resize</h3>
|
|
63
|
+
<p>Detects layout changes using custom breakpoints.</p>
|
|
64
|
+
<p>Triggers onChange callback when the active breakpoint changes on resize.</p>
|
|
65
|
+
|
|
66
|
+
```js
|
|
67
|
+
const points = carnationPoints(".myBox", {
|
|
68
|
+
breakpoints: [
|
|
69
|
+
{ name: "mobile", max: 767 },
|
|
70
|
+
{ name: "tablet", min: 768, max: 1023 },
|
|
71
|
+
{ name: "desktop", min: 1024 },
|
|
72
|
+
],
|
|
73
|
+
onChange(point) {
|
|
74
|
+
console.log("Resize:", point.breakpoint);
|
|
75
|
+
},
|
|
76
|
+
});
|
|
77
|
+
```
|
|
78
|
+
|
|
79
|
+
<h3>Add new breakpoints</h3>
|
|
80
|
+
<p>Adds additional custom breakpoints dynamically using addPoint.</p>
|
|
81
|
+
|
|
82
|
+
```js
|
|
83
|
+
const points = carnationPoints(".myBox", {
|
|
84
|
+
breakpoints: [
|
|
85
|
+
{ name: "mobile", max: 767 },
|
|
86
|
+
{ name: "tablet", min: 768, max: 1023 },
|
|
87
|
+
{ name: "desktop", min: 1024 },
|
|
88
|
+
],
|
|
89
|
+
});
|
|
90
|
+
|
|
91
|
+
points.addPoint([
|
|
92
|
+
{ name: "lg", min: 1200 },
|
|
93
|
+
{ name: "xl", min: 1600 },
|
|
94
|
+
]);
|
|
95
|
+
```
|
|
96
|
+
|
|
97
|
+
<h3>Destroy breakpoints</h3>
|
|
98
|
+
<p>Cleans up listeners and removes all breakpoint observers using destroy.</p>
|
|
99
|
+
|
|
100
|
+
```js
|
|
101
|
+
const points = carnationPoints(".myBox", {
|
|
102
|
+
breakpoints: [
|
|
103
|
+
{ name: "mobile", max: 767 },
|
|
104
|
+
{ name: "tablet", min: 768, max: 1023 },
|
|
105
|
+
{ name: "desktop", min: 1024 },
|
|
106
|
+
],
|
|
107
|
+
});
|
|
108
|
+
|
|
109
|
+
points.destroy();
|
|
110
|
+
```
|
|
111
|
+
|
|
112
|
+
<h3>Use Event</h3>
|
|
113
|
+
<p>Listens for breakpoint change events on the target element.</p>
|
|
114
|
+
<p>Executes logic when the active breakpoint changes.</p>
|
|
115
|
+
|
|
116
|
+
```js
|
|
117
|
+
points.el.addEventListener("breakpoint:change", function (e) {
|
|
118
|
+
if (e.detail.breakpoint === "mobile") {
|
|
119
|
+
console.log("Mobile active");
|
|
120
|
+
}
|
|
121
|
+
});
|
|
122
|
+
```
|
|
123
|
+
|
|
124
|
+
<h3>The HTML structure should be
|
|
125
|
+
</h3>
|
|
126
|
+
|
|
127
|
+
```html
|
|
128
|
+
<html>
|
|
129
|
+
<head>
|
|
130
|
+
<script src="./dist/carnationpoints.min.js"></script>
|
|
131
|
+
</head>
|
|
132
|
+
<body>
|
|
133
|
+
<div class="your-element-name">
|
|
134
|
+
Box
|
|
135
|
+
</div>
|
|
136
|
+
<script>
|
|
137
|
+
const points = carnationPoints(".your-element-name", {
|
|
138
|
+
breakpoints: [
|
|
139
|
+
{ name: "mobile", max: 767 },
|
|
140
|
+
{ name: "tablet", min: 768, max: 1023 },
|
|
141
|
+
{ name: "desktop", min: 1024 },
|
|
142
|
+
],
|
|
143
|
+
});
|
|
144
|
+
</script>
|
|
145
|
+
</body>
|
|
146
|
+
</html>
|
|
147
|
+
```
|
|
148
|
+
|
|
149
|
+
</body>
|
|
150
|
+
</html>
|
package/index.html
CHANGED
|
@@ -234,6 +234,36 @@
|
|
|
234
234
|
</div>
|
|
235
235
|
</div>
|
|
236
236
|
<!-- codebox 9 -->
|
|
237
|
+
<div class="codebox box">
|
|
238
|
+
<div class="use-snippet">
|
|
239
|
+
<h3 class="section-title">The HTML structure should be</h3>
|
|
240
|
+
<pre class="language-javascript">
|
|
241
|
+
<code class="language-javascript">
|
|
242
|
+
<html>
|
|
243
|
+
<head>
|
|
244
|
+
<script src="./dist/carnationpoints.min.js"></script>
|
|
245
|
+
</head>
|
|
246
|
+
<body>
|
|
247
|
+
<div class="your-element-name">
|
|
248
|
+
Box
|
|
249
|
+
</div>
|
|
250
|
+
|
|
251
|
+
<script>
|
|
252
|
+
const points = carnationPoints(".your-element-name", {
|
|
253
|
+
breakpoints: [
|
|
254
|
+
{ name: "mobile", max: 767 },
|
|
255
|
+
{ name: "tablet", min: 768, max: 1023 },
|
|
256
|
+
{ name: "desktop", min: 1024 },
|
|
257
|
+
],
|
|
258
|
+
});
|
|
259
|
+
</script>
|
|
260
|
+
</body>
|
|
261
|
+
</html>
|
|
262
|
+
</code>
|
|
263
|
+
</pre>
|
|
264
|
+
</div>
|
|
265
|
+
</div>
|
|
266
|
+
<!-- codebox 10 -->
|
|
237
267
|
<div class="codebox box">
|
|
238
268
|
<div class="use-snippet">
|
|
239
269
|
<div class="description">
|
package/package.json
CHANGED
|
@@ -1,71 +1,71 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "carnationpoints",
|
|
3
|
-
"version": "1.0.
|
|
4
|
-
"description": "Responsive Breakpoints",
|
|
5
|
-
"main": "dist/carnationpoints.js",
|
|
6
|
-
"scripts": {
|
|
7
|
-
"dev": "gulp",
|
|
8
|
-
"build": "gulp build",
|
|
9
|
-
"prepublishOnly": "npm run build"
|
|
10
|
-
},
|
|
11
|
-
"repository": {
|
|
12
|
-
"type": "git",
|
|
13
|
-
"url": "git+https://github.com/Hitesh82/carnationpoints.git"
|
|
14
|
-
},
|
|
15
|
-
"files": [
|
|
16
|
-
"dist",
|
|
17
|
-
"README.md",
|
|
18
|
-
"index.html",
|
|
19
|
-
"css",
|
|
20
|
-
"js",
|
|
21
|
-
"src"
|
|
22
|
-
],
|
|
23
|
-
"keywords": [
|
|
24
|
-
"responsive",
|
|
25
|
-
"breakpoints",
|
|
26
|
-
"responsive",
|
|
27
|
-
"design",
|
|
28
|
-
"viewport",
|
|
29
|
-
"Breakpoints",
|
|
30
|
-
"Adaptive",
|
|
31
|
-
"Breakpoints",
|
|
32
|
-
"breakpoints",
|
|
33
|
-
"media",
|
|
34
|
-
"queries",
|
|
35
|
-
"window",
|
|
36
|
-
"resize",
|
|
37
|
-
"custom",
|
|
38
|
-
"breakpoint",
|
|
39
|
-
"layout",
|
|
40
|
-
"breakpoints",
|
|
41
|
-
"dynamic",
|
|
42
|
-
"breakpoints",
|
|
43
|
-
"javascript",
|
|
44
|
-
"mobile",
|
|
45
|
-
"first",
|
|
46
|
-
"Flex",
|
|
47
|
-
"Breakpoints"
|
|
48
|
-
],
|
|
49
|
-
"author": "Hitesh Patel <hitesh.gopal@gmail.com>",
|
|
50
|
-
"contributors": [
|
|
51
|
-
{
|
|
52
|
-
"name": "Hitesh Patel",
|
|
53
|
-
"email": "hitesh.gopal@gmail.com",
|
|
54
|
-
"url": "https://github.com/Hitesh82"
|
|
55
|
-
}
|
|
56
|
-
],
|
|
57
|
-
"license": "ISC",
|
|
58
|
-
"bugs": {
|
|
59
|
-
"url": "https://github.com/Hitesh82/carnationpoints/issues"
|
|
60
|
-
},
|
|
61
|
-
"homepage": "https://github.com/Hitesh82/carnationpoints#readme",
|
|
62
|
-
"devDependencies": {
|
|
63
|
-
"gulp": "^5.0.1",
|
|
64
|
-
"gulp-concat": "^2.6.1",
|
|
65
|
-
"gulp-plumber": "^1.2.1",
|
|
66
|
-
"gulp-rename": "^2.1.0",
|
|
67
|
-
"gulp-sass": "^6.0.1",
|
|
68
|
-
"gulp-uglify": "^3.0.2",
|
|
69
|
-
"sass": "^1.97.1"
|
|
70
|
-
}
|
|
71
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"name": "carnationpoints",
|
|
3
|
+
"version": "1.0.5",
|
|
4
|
+
"description": "Responsive Breakpoints",
|
|
5
|
+
"main": "dist/carnationpoints.js",
|
|
6
|
+
"scripts": {
|
|
7
|
+
"dev": "gulp",
|
|
8
|
+
"build": "gulp build",
|
|
9
|
+
"prepublishOnly": "npm run build"
|
|
10
|
+
},
|
|
11
|
+
"repository": {
|
|
12
|
+
"type": "git",
|
|
13
|
+
"url": "git+https://github.com/Hitesh82/carnationpoints.git"
|
|
14
|
+
},
|
|
15
|
+
"files": [
|
|
16
|
+
"dist",
|
|
17
|
+
"README.md",
|
|
18
|
+
"index.html",
|
|
19
|
+
"css",
|
|
20
|
+
"js",
|
|
21
|
+
"src"
|
|
22
|
+
],
|
|
23
|
+
"keywords": [
|
|
24
|
+
"responsive",
|
|
25
|
+
"breakpoints",
|
|
26
|
+
"responsive",
|
|
27
|
+
"design",
|
|
28
|
+
"viewport",
|
|
29
|
+
"Breakpoints",
|
|
30
|
+
"Adaptive",
|
|
31
|
+
"Breakpoints",
|
|
32
|
+
"breakpoints",
|
|
33
|
+
"media",
|
|
34
|
+
"queries",
|
|
35
|
+
"window",
|
|
36
|
+
"resize",
|
|
37
|
+
"custom",
|
|
38
|
+
"breakpoint",
|
|
39
|
+
"layout",
|
|
40
|
+
"breakpoints",
|
|
41
|
+
"dynamic",
|
|
42
|
+
"breakpoints",
|
|
43
|
+
"javascript",
|
|
44
|
+
"mobile",
|
|
45
|
+
"first",
|
|
46
|
+
"Flex",
|
|
47
|
+
"Breakpoints"
|
|
48
|
+
],
|
|
49
|
+
"author": "Hitesh Patel <hitesh.gopal@gmail.com>",
|
|
50
|
+
"contributors": [
|
|
51
|
+
{
|
|
52
|
+
"name": "Hitesh Patel",
|
|
53
|
+
"email": "hitesh.gopal@gmail.com",
|
|
54
|
+
"url": "https://github.com/Hitesh82"
|
|
55
|
+
}
|
|
56
|
+
],
|
|
57
|
+
"license": "ISC",
|
|
58
|
+
"bugs": {
|
|
59
|
+
"url": "https://github.com/Hitesh82/carnationpoints/issues"
|
|
60
|
+
},
|
|
61
|
+
"homepage": "https://github.com/Hitesh82/carnationpoints#readme",
|
|
62
|
+
"devDependencies": {
|
|
63
|
+
"gulp": "^5.0.1",
|
|
64
|
+
"gulp-concat": "^2.6.1",
|
|
65
|
+
"gulp-plumber": "^1.2.1",
|
|
66
|
+
"gulp-rename": "^2.1.0",
|
|
67
|
+
"gulp-sass": "^6.0.1",
|
|
68
|
+
"gulp-uglify": "^3.0.2",
|
|
69
|
+
"sass": "^1.97.1"
|
|
70
|
+
}
|
|
71
|
+
}
|