carnationpoints 1.0.0
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 +29 -0
- package/carnationpoints/carnationpoints.js +156 -0
- package/css/prism.min.css +1 -0
- package/css/style.css +120 -0
- package/index.html +215 -0
- package/js/prism.min.js +1 -0
- package/js/script.js +20 -0
- package/package.json +45 -0
package/README.md
ADDED
|
@@ -0,0 +1,29 @@
|
|
|
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
|
+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/9000.0.1/themes/prism.min.css" />
|
|
11
|
+
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/9000.0.1/prism.min.js"></script>
|
|
12
|
+
</head>
|
|
13
|
+
|
|
14
|
+
<body>
|
|
15
|
+
<h1 style>Carnation Breakpoints</h1>
|
|
16
|
+
<h2>Notes</h2>
|
|
17
|
+
<p>This is pure javascript plugin no require jquery dependance. this plugin help to easiest work with use. </p>
|
|
18
|
+
<p>A lightweight JavaScript breakpoint solution to detect screen sizes, handle window resize events, and build responsive web layouts</p>
|
|
19
|
+
<p>No need css</p>
|
|
20
|
+
<div class="codebox box">
|
|
21
|
+
<div class="use-snippet">
|
|
22
|
+
<h3 class="section-title">Define carnationPoints()</h3>
|
|
23
|
+
<pre class="language-javascript">
|
|
24
|
+
const points = carnationPoints(".myBox");
|
|
25
|
+
</pre>
|
|
26
|
+
</div>
|
|
27
|
+
</div>
|
|
28
|
+
</body>
|
|
29
|
+
</html>
|
|
@@ -0,0 +1,156 @@
|
|
|
1
|
+
(function (window, document) {
|
|
2
|
+
"use strict";
|
|
3
|
+
|
|
4
|
+
function carnationPoints(target, options = {}) {
|
|
5
|
+
return new point(target, options);
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
function point(target, options) {
|
|
9
|
+
this.el =
|
|
10
|
+
typeof target === "string" ? document.querySelector(target) : target;
|
|
11
|
+
|
|
12
|
+
if (!this.el) {
|
|
13
|
+
console.warn("Breakpoints: element not found");
|
|
14
|
+
return;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
this.defaults = {
|
|
18
|
+
debug: false,
|
|
19
|
+
speed: 300,
|
|
20
|
+
onInit: null,
|
|
21
|
+
onChange: null,
|
|
22
|
+
breakpoints: [],
|
|
23
|
+
destroyed: false,
|
|
24
|
+
};
|
|
25
|
+
|
|
26
|
+
this.options = { ...this.defaults, ...options };
|
|
27
|
+
|
|
28
|
+
this.state = {
|
|
29
|
+
initialized: false,
|
|
30
|
+
};
|
|
31
|
+
|
|
32
|
+
this._onResize = this._onResize.bind(this);
|
|
33
|
+
|
|
34
|
+
this.init();
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
point.prototype.init = function () {
|
|
38
|
+
if (this.state.initialized || this.options.destroyed) return;
|
|
39
|
+
|
|
40
|
+
this.state.initialized = true;
|
|
41
|
+
|
|
42
|
+
const width = this._getWidth();
|
|
43
|
+
this.state.breakpoint = this._getActiveBreakpoint(width);
|
|
44
|
+
|
|
45
|
+
window.addEventListener("resize", this._onResize);
|
|
46
|
+
|
|
47
|
+
this._emit("onInit", {
|
|
48
|
+
width,
|
|
49
|
+
breakpoint: this.state.breakpoint,
|
|
50
|
+
element: this.el,
|
|
51
|
+
destroyed: this.options.destroyed,
|
|
52
|
+
});
|
|
53
|
+
|
|
54
|
+
this._log("initialized");
|
|
55
|
+
};
|
|
56
|
+
|
|
57
|
+
point.prototype._onResize = function () {
|
|
58
|
+
if (this.options.destroyed === true) return;
|
|
59
|
+
|
|
60
|
+
const width = this._getWidth();
|
|
61
|
+
const newBreakpoint = this._getActiveBreakpoint(width);
|
|
62
|
+
|
|
63
|
+
// Only react if breakpoint changed
|
|
64
|
+
if (newBreakpoint !== this.state.breakpoint) {
|
|
65
|
+
const prev = this.state.breakpoint;
|
|
66
|
+
this.state.breakpoint = newBreakpoint;
|
|
67
|
+
|
|
68
|
+
this._emit("onChange", {
|
|
69
|
+
width,
|
|
70
|
+
breakpoint: newBreakpoint,
|
|
71
|
+
element: this.el,
|
|
72
|
+
destroyed: this.options.destroyed,
|
|
73
|
+
});
|
|
74
|
+
}
|
|
75
|
+
};
|
|
76
|
+
|
|
77
|
+
point.prototype._emit = function (callbackName, data) {
|
|
78
|
+
if (typeof this.options[callbackName] === "function") {
|
|
79
|
+
this.options[callbackName](data);
|
|
80
|
+
}
|
|
81
|
+
};
|
|
82
|
+
|
|
83
|
+
point.prototype._log = function (...args) {
|
|
84
|
+
if (this.options.debug) {
|
|
85
|
+
console.log("Breakpoints:", ...args);
|
|
86
|
+
}
|
|
87
|
+
};
|
|
88
|
+
|
|
89
|
+
point.prototype._getWidth = function () {
|
|
90
|
+
return window.innerWidth;
|
|
91
|
+
};
|
|
92
|
+
|
|
93
|
+
point.prototype._getActiveBreakpoint = function (width) {
|
|
94
|
+
let active = null;
|
|
95
|
+
|
|
96
|
+
this.options.breakpoints.forEach((bp) => {
|
|
97
|
+
const min = bp.min ?? 0;
|
|
98
|
+
const max = bp.max ?? Infinity;
|
|
99
|
+
|
|
100
|
+
if (width >= min && width <= max) {
|
|
101
|
+
active = bp.name ?? `${min}-${max}`;
|
|
102
|
+
}
|
|
103
|
+
});
|
|
104
|
+
|
|
105
|
+
return active;
|
|
106
|
+
};
|
|
107
|
+
|
|
108
|
+
point.prototype.addPoint = function (bps = []) {
|
|
109
|
+
//if (!bp || typeof bp !== "object") return;
|
|
110
|
+
if (!Array.isArray(bps)) return;
|
|
111
|
+
|
|
112
|
+
this.options.breakpoints.push(...bps);
|
|
113
|
+
|
|
114
|
+
// Recalculate breakpoint
|
|
115
|
+
const width = this._getWidth();
|
|
116
|
+
const newBreakpoint = this._getActiveBreakpoint(width);
|
|
117
|
+
|
|
118
|
+
if (newBreakpoint !== this.state.breakpoint) {
|
|
119
|
+
const prev = this.state.breakpoint;
|
|
120
|
+
this.state.breakpoint = newBreakpoint;
|
|
121
|
+
|
|
122
|
+
this._emit("onChange", {
|
|
123
|
+
width,
|
|
124
|
+
breakpoint: newBreakpoint,
|
|
125
|
+
previous: prev,
|
|
126
|
+
element: this.el,
|
|
127
|
+
destroyed: this.options.destroyed,
|
|
128
|
+
});
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
this._log("point added", bps);
|
|
132
|
+
};
|
|
133
|
+
|
|
134
|
+
point.prototype.destroy = function () {
|
|
135
|
+
window.removeEventListener("resize", this._onResize);
|
|
136
|
+
|
|
137
|
+
this.options.breakpoints = [];
|
|
138
|
+
|
|
139
|
+
this.options.destroyed = true;
|
|
140
|
+
|
|
141
|
+
this.state.breakpoint = null;
|
|
142
|
+
this.state.initialized = false;
|
|
143
|
+
|
|
144
|
+
this.options.onChange = null;
|
|
145
|
+
this.options.onInit = null;
|
|
146
|
+
|
|
147
|
+
this._log("destroyed and breakpoints cleared");
|
|
148
|
+
console.warn("Breakpoints: destroyed & cleared");
|
|
149
|
+
};
|
|
150
|
+
|
|
151
|
+
point.prototype.getBreakpoint = function () {
|
|
152
|
+
return this.state.breakpoint;
|
|
153
|
+
};
|
|
154
|
+
|
|
155
|
+
window.carnationPoints = carnationPoints;
|
|
156
|
+
})(window, document);
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
code[class*=language-],pre[class*=language-]{color:#000;background:0 0;text-shadow:0 1px #fff;font-family:Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}code[class*=language-] ::-moz-selection,code[class*=language-]::-moz-selection,pre[class*=language-] ::-moz-selection,pre[class*=language-]::-moz-selection{text-shadow:none;background:#b3d4fc}code[class*=language-] ::selection,code[class*=language-]::selection,pre[class*=language-] ::selection,pre[class*=language-]::selection{text-shadow:none;background:#b3d4fc}@media print{code[class*=language-],pre[class*=language-]{text-shadow:none}}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto}:not(pre)>code[class*=language-],pre[class*=language-]{background:#f5f2f0}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#708090}.token.punctuation{color:#999}.token.namespace{opacity:.7}.token.boolean,.token.constant,.token.deleted,.token.number,.token.property,.token.symbol,.token.tag{color:#905}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:#690}.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url{color:#9a6e3a;background:hsla(0,0%,100%,.5)}.token.atrule,.token.attr-value,.token.keyword{color:#07a}.token.class-name,.token.function{color:#dd4a68}.token.important,.token.regex,.token.variable{color:#e90}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}
|
package/css/style.css
ADDED
|
@@ -0,0 +1,120 @@
|
|
|
1
|
+
body {
|
|
2
|
+
padding: 0;
|
|
3
|
+
margin: 0;
|
|
4
|
+
box-sizing: border-box;
|
|
5
|
+
font-family: Arial, sans-serif;
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
.header {
|
|
9
|
+
background-color: #333;
|
|
10
|
+
color: #fff;
|
|
11
|
+
padding: 20px;
|
|
12
|
+
text-align: center;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
.header .h1 {
|
|
16
|
+
margin: 0 0 15px;
|
|
17
|
+
font-size: 40px;
|
|
18
|
+
font-weight: 700;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
.header .h2 {
|
|
22
|
+
font-weight: normal;
|
|
23
|
+
font-size: 16px;
|
|
24
|
+
margin: 0 0 15px;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
@keyframes gradient {
|
|
28
|
+
0% {
|
|
29
|
+
background-position: 0% 50%;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
50% {
|
|
33
|
+
background-position: 100% 50%;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
100% {
|
|
37
|
+
background-position: 0% 50%;
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
.myBox {
|
|
42
|
+
color: #fff;
|
|
43
|
+
font-weight: bold;
|
|
44
|
+
display: flex;
|
|
45
|
+
align-items: center;
|
|
46
|
+
justify-content: center;
|
|
47
|
+
flex-direction: column;
|
|
48
|
+
font-size: 24px;
|
|
49
|
+
width: 100%;
|
|
50
|
+
height: 200px;
|
|
51
|
+
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
|
|
52
|
+
background-size: 400% 400%;
|
|
53
|
+
animation: gradient 15s ease infinite;
|
|
54
|
+
}
|
|
55
|
+
p {
|
|
56
|
+
font-size: 16px;
|
|
57
|
+
font-weight: normal;
|
|
58
|
+
}
|
|
59
|
+
#myBox{
|
|
60
|
+
display: block;
|
|
61
|
+
width: 100%;
|
|
62
|
+
text-align: center;
|
|
63
|
+
}
|
|
64
|
+
pre {
|
|
65
|
+
display: flex;
|
|
66
|
+
justify-content: center;
|
|
67
|
+
}
|
|
68
|
+
pre:focus, code:focus {
|
|
69
|
+
outline: none;
|
|
70
|
+
box-shadow: none;
|
|
71
|
+
}
|
|
72
|
+
.codebox {
|
|
73
|
+
padding: 10px;
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
.section-title {
|
|
77
|
+
font-size: 20px;
|
|
78
|
+
padding: 10px;
|
|
79
|
+
text-align: center;
|
|
80
|
+
margin: 0 0 10px 0;
|
|
81
|
+
}
|
|
82
|
+
.use-snippet {
|
|
83
|
+
max-width: 700px;
|
|
84
|
+
width: 100%;
|
|
85
|
+
margin: 0 auto;
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
.footer {
|
|
89
|
+
background-color: #333;
|
|
90
|
+
color: #fff;
|
|
91
|
+
padding: 20px 10px;
|
|
92
|
+
text-align: center;
|
|
93
|
+
}
|
|
94
|
+
.footer a {
|
|
95
|
+
color: #ffcc00;
|
|
96
|
+
text-decoration: none;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
blockquote {
|
|
100
|
+
border-left: 4px solid #e94c72;
|
|
101
|
+
margin: 1.5em auto;
|
|
102
|
+
padding: 30px 10px;
|
|
103
|
+
color: #000;
|
|
104
|
+
font-size: 20px;
|
|
105
|
+
line-height: 1.6;
|
|
106
|
+
background-color: #f9f9f9;
|
|
107
|
+
text-align: center;
|
|
108
|
+
max-width: 800px;
|
|
109
|
+
width: 100%;
|
|
110
|
+
}
|
|
111
|
+
blockquote h1 {
|
|
112
|
+
margin: 0;
|
|
113
|
+
font-size: 18px;
|
|
114
|
+
}
|
|
115
|
+
code[class*=language-], pre[class*=language-] {
|
|
116
|
+
tab-size: 1;
|
|
117
|
+
-moz-tab-size: 1;
|
|
118
|
+
-o-tab-size: 1;
|
|
119
|
+
-webkit-tab-size: 1;
|
|
120
|
+
}
|
package/index.html
ADDED
|
@@ -0,0 +1,215 @@
|
|
|
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
|
+
|
|
11
|
+
<meta
|
|
12
|
+
name="description"
|
|
13
|
+
content="A lightweight JavaScript breakpoint solution to detect screen sizes, handle window resize events, and build responsive web layouts."
|
|
14
|
+
/>
|
|
15
|
+
|
|
16
|
+
<title>Carnation Breakpoints | Responsive Breakpoints</title>
|
|
17
|
+
<link rel="stylesheet" href="./css/prism.min.css" />
|
|
18
|
+
<link rel="stylesheet" href="./css/style.css" />
|
|
19
|
+
<script src="./js/prism.min.js"></script>
|
|
20
|
+
</head>
|
|
21
|
+
|
|
22
|
+
<body>
|
|
23
|
+
<header class="header">
|
|
24
|
+
<div class="h1">Carnation Breakpoints</div>
|
|
25
|
+
<div class="h2">
|
|
26
|
+
“Responsive States — Know exactly where your layout stands.”
|
|
27
|
+
</div>
|
|
28
|
+
</header>
|
|
29
|
+
<!-- INITIAL PHP RENDER -->
|
|
30
|
+
<div class="myBox">
|
|
31
|
+
<p>Resize window</p>
|
|
32
|
+
<div id="myBox">Example: none</div>
|
|
33
|
+
</div>
|
|
34
|
+
<div class="notes">
|
|
35
|
+
<blockquote>
|
|
36
|
+
<h1>
|
|
37
|
+
<strong>Carnation Breakpoints</strong> is a lightweight JavaScript
|
|
38
|
+
Plugin that helps you manage responsive breakpoints in your web
|
|
39
|
+
applications. It allows you to define custom breakpoints, listen for
|
|
40
|
+
changes in viewport size, and execute callback functions when the
|
|
41
|
+
viewport enters or exits specific breakpoints.
|
|
42
|
+
</h1>
|
|
43
|
+
</blockquote>
|
|
44
|
+
</div>
|
|
45
|
+
<!-- codebox 1 -->
|
|
46
|
+
<div class="codebox box">
|
|
47
|
+
<div class="use-snippet">
|
|
48
|
+
<h3 class="section-title">Define carnationPoints()</h3>
|
|
49
|
+
<pre class="language-javascript">
|
|
50
|
+
<code class="language-javascript">
|
|
51
|
+
const points = carnationPoints(".myBox");
|
|
52
|
+
</code>
|
|
53
|
+
</pre>
|
|
54
|
+
</div>
|
|
55
|
+
</div>
|
|
56
|
+
<!-- codebox 2 -->
|
|
57
|
+
<div class="codebox">
|
|
58
|
+
<div class="use-snippet">
|
|
59
|
+
<h3 class="section-title">Create Breakpoints</h3>
|
|
60
|
+
<pre class="language-javascript">
|
|
61
|
+
<code class="language-javascript">
|
|
62
|
+
const points = carnationPoints(".myBox", {
|
|
63
|
+
breakpoints: [
|
|
64
|
+
{ name: "mobile", max: 767 },
|
|
65
|
+
{ name: "tablet", min: 768, max: 1023 },
|
|
66
|
+
{ name: "desktop", min: 1024 },
|
|
67
|
+
],
|
|
68
|
+
});
|
|
69
|
+
</code>
|
|
70
|
+
</pre>
|
|
71
|
+
</div>
|
|
72
|
+
</div>
|
|
73
|
+
<!-- codebox 3 -->
|
|
74
|
+
<div class="codebox">
|
|
75
|
+
<div class="use-snippet">
|
|
76
|
+
<h3 class="section-title">Get Breakpoint on Init</h3>
|
|
77
|
+
<pre class="language-javascript">
|
|
78
|
+
<code class="language-javascript">
|
|
79
|
+
const points = carnationPoints(".myBox", {
|
|
80
|
+
breakpoints: [
|
|
81
|
+
{ name: "mobile", max: 767 },
|
|
82
|
+
{ name: "tablet", min: 768, max: 1023 },
|
|
83
|
+
{ name: "desktop", min: 1024 },
|
|
84
|
+
],
|
|
85
|
+
onInit(point) {
|
|
86
|
+
console.log("Init:", point.breakpoint);
|
|
87
|
+
},
|
|
88
|
+
});
|
|
89
|
+
</code>
|
|
90
|
+
</pre>
|
|
91
|
+
</div>
|
|
92
|
+
</div>
|
|
93
|
+
<!-- codebox 4 -->
|
|
94
|
+
<div class="codebox">
|
|
95
|
+
<div class="use-snippet">
|
|
96
|
+
<h3 class="section-title">Get Breakpoint on Resize</h3>
|
|
97
|
+
<pre class="language-javascript">
|
|
98
|
+
<code class="language-javascript">
|
|
99
|
+
const points = carnationPoints(".myBox", {
|
|
100
|
+
breakpoints: [
|
|
101
|
+
{ name: "mobile", max: 767 },
|
|
102
|
+
{ name: "tablet", min: 768, max: 1023 },
|
|
103
|
+
{ name: "desktop", min: 1024 },
|
|
104
|
+
],
|
|
105
|
+
onChange(point) {
|
|
106
|
+
console.log("Resize:", point.breakpoint);
|
|
107
|
+
},
|
|
108
|
+
});
|
|
109
|
+
</code>
|
|
110
|
+
</pre>
|
|
111
|
+
</div>
|
|
112
|
+
</div>
|
|
113
|
+
<!-- codebox 5 -->
|
|
114
|
+
<div class="codebox">
|
|
115
|
+
<div class="use-snippet">
|
|
116
|
+
<h3 class="section-title">Add new breakpoints</h3>
|
|
117
|
+
<pre class="language-javascript">
|
|
118
|
+
<code class="language-javascript">
|
|
119
|
+
const points = carnationPoints(".myBox", {
|
|
120
|
+
breakpoints: [
|
|
121
|
+
{ name: "mobile", max: 767 },
|
|
122
|
+
{ name: "tablet", min: 768, max: 1023 },
|
|
123
|
+
{ name: "desktop", min: 1024 },
|
|
124
|
+
],
|
|
125
|
+
});
|
|
126
|
+
|
|
127
|
+
points.addPoint([
|
|
128
|
+
{ name: "lg", min: 1200 },
|
|
129
|
+
{ name: "xl", min: 1600 },
|
|
130
|
+
]);
|
|
131
|
+
</code>
|
|
132
|
+
</pre>
|
|
133
|
+
</div>
|
|
134
|
+
</div>
|
|
135
|
+
<!-- codebox 6 -->
|
|
136
|
+
<div class="codebox">
|
|
137
|
+
<div class="use-snippet">
|
|
138
|
+
<h3 class="section-title">Destroy breakpoints</h3>
|
|
139
|
+
<pre class="language-javascript">
|
|
140
|
+
<code class="language-javascript">
|
|
141
|
+
const points = carnationPoints(".myBox", {
|
|
142
|
+
breakpoints: [
|
|
143
|
+
{ name: "mobile", max: 767 },
|
|
144
|
+
{ name: "tablet", min: 768, max: 1023 },
|
|
145
|
+
{ name: "desktop", min: 1024 },
|
|
146
|
+
],
|
|
147
|
+
});
|
|
148
|
+
|
|
149
|
+
points.destroy();
|
|
150
|
+
</code>
|
|
151
|
+
</pre>
|
|
152
|
+
</div>
|
|
153
|
+
</div>
|
|
154
|
+
<!-- codebox 7 -->
|
|
155
|
+
<div class="codebox">
|
|
156
|
+
<div class="use-snippet">
|
|
157
|
+
<h3 class="section-title">Get Breakpoints</h3>
|
|
158
|
+
<pre class="language-javascript">
|
|
159
|
+
<code class="language-javascript">
|
|
160
|
+
const points = carnationPoints(".myBox", {
|
|
161
|
+
breakpoints: [
|
|
162
|
+
{ name: "mobile", max: 767 },
|
|
163
|
+
{ name: "tablet", min: 768, max: 1023 },
|
|
164
|
+
{ name: "desktop", min: 1024 },
|
|
165
|
+
],
|
|
166
|
+
});
|
|
167
|
+
|
|
168
|
+
if (points.getBreakpoint() === "mobile") {
|
|
169
|
+
console.log("You are in mobile breakpoint");
|
|
170
|
+
} else {
|
|
171
|
+
console.log("You are not in mobile breakpoint");
|
|
172
|
+
}
|
|
173
|
+
</code>
|
|
174
|
+
</pre>
|
|
175
|
+
</div>
|
|
176
|
+
</div>
|
|
177
|
+
<!-- codebox 8 -->
|
|
178
|
+
<div class="codebox">
|
|
179
|
+
<div class="use-snippet">
|
|
180
|
+
<h3 class="section-title">Different way usage</h3>
|
|
181
|
+
<pre class="language-javascript">
|
|
182
|
+
<code class="language-javascript">
|
|
183
|
+
const points = carnationPoints("#myBox", {
|
|
184
|
+
debug: true,
|
|
185
|
+
breakpoints: [
|
|
186
|
+
{ name: "mobile", max: 767 },
|
|
187
|
+
{ name: "tablet", min: 768, max: 1023 },
|
|
188
|
+
{ name: "desktop", min: 1024 },
|
|
189
|
+
],
|
|
190
|
+
onInit(point) {
|
|
191
|
+
if (point.breakpoint) {
|
|
192
|
+
document.querySelector(
|
|
193
|
+
"#myBox"
|
|
194
|
+
).textContent = `Example: ${point.breakpoint}`;
|
|
195
|
+
}
|
|
196
|
+
},
|
|
197
|
+
onChange(point) {
|
|
198
|
+
document.querySelector(
|
|
199
|
+
"#myBox"
|
|
200
|
+
).textContent = `Example: ${point.breakpoint}`;
|
|
201
|
+
},
|
|
202
|
+
});
|
|
203
|
+
</code>
|
|
204
|
+
</pre>
|
|
205
|
+
</div>
|
|
206
|
+
</div>
|
|
207
|
+
<footer class="footer">
|
|
208
|
+
<p>Support</p>
|
|
209
|
+
Hitesh R Patel :-
|
|
210
|
+
<a href="mailto:hitesh.gopal@gmail.com">hitesh.gopal@gmail.com</a>
|
|
211
|
+
</footer>
|
|
212
|
+
<script src="./carnationpoints/carnationpoints.js"></script>
|
|
213
|
+
<script src="./js/script.js"></script>
|
|
214
|
+
</body>
|
|
215
|
+
</html>
|
package/js/prism.min.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
var _self="undefined"!=typeof window?window:"undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?self:{},Prism=function(l){var n=/(?:^|\s)lang(?:uage)?-([\w-]+)(?=\s|$)/i,t=0,e={},j={manual:l.Prism&&l.Prism.manual,disableWorkerMessageHandler:l.Prism&&l.Prism.disableWorkerMessageHandler,util:{encode:function e(t){return t instanceof C?new C(t.type,e(t.content),t.alias):Array.isArray(t)?t.map(e):t.replace(/&/g,"&").replace(/</g,"<").replace(/\u00a0/g," ")},type:function(e){return Object.prototype.toString.call(e).slice(8,-1)},objId:function(e){return e.__id||Object.defineProperty(e,"__id",{value:++t}),e.__id},clone:function n(e,a){var r,t;switch(a=a||{},j.util.type(e)){case"Object":if(t=j.util.objId(e),a[t])return a[t];for(var s in r={},a[t]=r,e)e.hasOwnProperty(s)&&(r[s]=n(e[s],a));return r;case"Array":return(t=j.util.objId(e),a[t])?a[t]:(r=[],a[t]=r,e.forEach(function(e,t){r[t]=n(e,a)}),r);default:return e}},getLanguage:function(e){for(;e;){var t=n.exec(e.className);if(t)return t[1].toLowerCase();e=e.parentElement}return"none"},setLanguage:function(e,t){e.className=e.className.replace(RegExp(n,"gi"),""),e.classList.add("language-"+t)},currentScript:function(){if("undefined"==typeof document)return null;if("currentScript"in document)return document.currentScript;try{throw new Error}catch(e){var t=(/at [^(\r\n]*\((.*):[^:]+:[^:]+\)$/i.exec(e.stack)||[])[1];if(t){var n,a=document.getElementsByTagName("script");for(n in a)if(a[n].src==t)return a[n]}return null}},isActive:function(e,t,n){for(var a="no-"+t;e;){var r=e.classList;if(r.contains(t))return!0;if(r.contains(a))return!1;e=e.parentElement}return!!n}},languages:{plain:e,plaintext:e,text:e,txt:e,extend:function(e,t){var n,a=j.util.clone(j.languages[e]);for(n in t)a[n]=t[n];return a},insertBefore:function(n,e,t,a){var r,s=(a=a||j.languages)[n],i={};for(r in s)if(s.hasOwnProperty(r)){if(r==e)for(var o in t)t.hasOwnProperty(o)&&(i[o]=t[o]);t.hasOwnProperty(r)||(i[r]=s[r])}var l=a[n];return a[n]=i,j.languages.DFS(j.languages,function(e,t){t===l&&e!=n&&(this[e]=i)}),i},DFS:function e(t,n,a,r){r=r||{};var s,i,o,l=j.util.objId;for(s in t)t.hasOwnProperty(s)&&(n.call(t,s,t[s],a||s),i=t[s],"Object"!==(o=j.util.type(i))||r[l(i)]?"Array"!==o||r[l(i)]||(r[l(i)]=!0,e(i,n,s,r)):(r[l(i)]=!0,e(i,n,null,r)))}},plugins:{},highlightAll:function(e,t){j.highlightAllUnder(document,e,t)},highlightAllUnder:function(e,t,n){var a={callback:n,container:e,selector:'code[class*="language-"], [class*="language-"] code, code[class*="lang-"], [class*="lang-"] code'};j.hooks.run("before-highlightall",a),a.elements=Array.prototype.slice.apply(a.container.querySelectorAll(a.selector)),j.hooks.run("before-all-elements-highlight",a);for(var r,s=0;r=a.elements[s++];)j.highlightElement(r,!0===t,a.callback)},highlightElement:function(e,t,n){var a=j.util.getLanguage(e),r=j.languages[a],s=(j.util.setLanguage(e,a),e.parentElement);s&&"pre"===s.nodeName.toLowerCase()&&j.util.setLanguage(s,a);var i={element:e,language:a,grammar:r,code:e.textContent};function o(e){i.highlightedCode=e,j.hooks.run("before-insert",i),i.element.innerHTML=i.highlightedCode,j.hooks.run("after-highlight",i),j.hooks.run("complete",i),n&&n.call(i.element)}if(j.hooks.run("before-sanity-check",i),(s=i.element.parentElement)&&"pre"===s.nodeName.toLowerCase()&&!s.hasAttribute("tabindex")&&s.setAttribute("tabindex","0"),!i.code)return j.hooks.run("complete",i),void(n&&n.call(i.element));j.hooks.run("before-highlight",i),i.grammar?t&&l.Worker?((a=new Worker(j.filename)).onmessage=function(e){o(e.data)},a.postMessage(JSON.stringify({language:i.language,code:i.code,immediateClose:!0}))):o(j.highlight(i.code,i.grammar,i.language)):o(j.util.encode(i.code))},highlight:function(e,t,n){e={code:e,grammar:t,language:n};if(j.hooks.run("before-tokenize",e),e.grammar)return e.tokens=j.tokenize(e.code,e.grammar),j.hooks.run("after-tokenize",e),C.stringify(j.util.encode(e.tokens),e.language);throw new Error('The language "'+e.language+'" has no grammar.')},tokenize:function(e,t){var n=t.rest;if(n){for(var a in n)t[a]=n[a];delete t.rest}for(var r=new u,s=(z(r,r.head,e),!function e(t,n,a,r,s,i){for(var o in a)if(a.hasOwnProperty(o)&&a[o]){var l=a[o];l=Array.isArray(l)?l:[l];for(var u=0;u<l.length;++u){if(i&&i.cause==o+","+u)return;for(var g,c=l[u],d=c.inside,p=!!c.lookbehind,m=!!c.greedy,h=c.alias,f=(m&&!c.pattern.global&&(g=c.pattern.toString().match(/[imsuy]*$/)[0],c.pattern=RegExp(c.pattern.source,g+"g")),c.pattern||c),b=r.next,y=s;b!==n.tail&&!(i&&y>=i.reach);y+=b.value.length,b=b.next){var v=b.value;if(n.length>t.length)return;if(!(v instanceof C)){var F,x=1;if(m){if(!(F=L(f,y,t,p))||F.index>=t.length)break;var k=F.index,w=F.index+F[0].length,A=y;for(A+=b.value.length;A<=k;)b=b.next,A+=b.value.length;if(A-=b.value.length,y=A,b.value instanceof C)continue;for(var P=b;P!==n.tail&&(A<w||"string"==typeof P.value);P=P.next)x++,A+=P.value.length;x--,v=t.slice(y,A),F.index-=y}else if(!(F=L(f,0,v,p)))continue;var k=F.index,$=F[0],S=v.slice(0,k),E=v.slice(k+$.length),v=y+v.length,_=(i&&v>i.reach&&(i.reach=v),b.prev),S=(S&&(_=z(n,_,S),y+=S.length),O(n,_,x),new C(o,d?j.tokenize($,d):$,h,$));b=z(n,_,S),E&&z(n,b,E),1<x&&($={cause:o+","+u,reach:v},e(t,n,a,b.prev,y,$),i&&$.reach>i.reach&&(i.reach=$.reach))}}}}}(e,r,t,r.head,0),r),i=[],o=s.head.next;o!==s.tail;)i.push(o.value),o=o.next;return i},hooks:{all:{},add:function(e,t){var n=j.hooks.all;n[e]=n[e]||[],n[e].push(t)},run:function(e,t){var n=j.hooks.all[e];if(n&&n.length)for(var a,r=0;a=n[r++];)a(t)}},Token:C};function C(e,t,n,a){this.type=e,this.content=t,this.alias=n,this.length=0|(a||"").length}function L(e,t,n,a){e.lastIndex=t;t=e.exec(n);return t&&a&&t[1]&&(e=t[1].length,t.index+=e,t[0]=t[0].slice(e)),t}function u(){var e={value:null,prev:null,next:null},t={value:null,prev:e,next:null};e.next=t,this.head=e,this.tail=t,this.length=0}function z(e,t,n){var a=t.next,n={value:n,prev:t,next:a};return t.next=n,a.prev=n,e.length++,n}function O(e,t,n){for(var a=t.next,r=0;r<n&&a!==e.tail;r++)a=a.next;(t.next=a).prev=t,e.length-=r}if(l.Prism=j,C.stringify=function t(e,n){if("string"==typeof e)return e;var a;if(Array.isArray(e))return a="",e.forEach(function(e){a+=t(e,n)}),a;var r,s={type:e.type,content:t(e.content,n),tag:"span",classes:["token",e.type],attributes:{},language:n},e=e.alias,i=(e&&(Array.isArray(e)?Array.prototype.push.apply(s.classes,e):s.classes.push(e)),j.hooks.run("wrap",s),"");for(r in s.attributes)i+=" "+r+'="'+(s.attributes[r]||"").replace(/"/g,""")+'"';return"<"+s.tag+' class="'+s.classes.join(" ")+'"'+i+">"+s.content+"</"+s.tag+">"},!l.document)return l.addEventListener&&(j.disableWorkerMessageHandler||l.addEventListener("message",function(e){var e=JSON.parse(e.data),t=e.language,n=e.code,e=e.immediateClose;l.postMessage(j.highlight(n,j.languages[t],t)),e&&l.close()},!1)),j;var a,e=j.util.currentScript();function r(){j.manual||j.highlightAll()}return e&&(j.filename=e.src,e.hasAttribute("data-manual")&&(j.manual=!0)),j.manual||("loading"===(a=document.readyState)||"interactive"===a&&e&&e.defer?document.addEventListener("DOMContentLoaded",r):window.requestAnimationFrame?window.requestAnimationFrame(r):window.setTimeout(r,16)),j}(_self);"undefined"!=typeof module&&module.exports&&(module.exports=Prism),"undefined"!=typeof global&&(global.Prism=Prism),Prism.languages.markup={comment:{pattern:/<!--(?:(?!<!--)[\s\S])*?-->/,greedy:!0},prolog:{pattern:/<\?[\s\S]+?\?>/,greedy:!0},doctype:{pattern:/<!DOCTYPE(?:[^>"'[\]]|"[^"]*"|'[^']*')+(?:\[(?:[^<"'\]]|"[^"]*"|'[^']*'|<(?!!--)|<!--(?:[^-]|-(?!->))*-->)*\]\s*)?>/i,greedy:!0,inside:{"internal-subset":{pattern:/(^[^\[]*\[)[\s\S]+(?=\]>$)/,lookbehind:!0,greedy:!0,inside:null},string:{pattern:/"[^"]*"|'[^']*'/,greedy:!0},punctuation:/^<!|>$|[[\]]/,"doctype-tag":/^DOCTYPE/i,name:/[^\s<>'"]+/}},cdata:{pattern:/<!\[CDATA\[[\s\S]*?\]\]>/i,greedy:!0},tag:{pattern:/<\/?(?!\d)[^\s>\/=$<%]+(?:\s(?:\s*[^\s>\/=]+(?:\s*=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+(?=[\s>]))|(?=[\s/>])))+)?\s*\/?>/,greedy:!0,inside:{tag:{pattern:/^<\/?[^\s>\/]+/,inside:{punctuation:/^<\/?/,namespace:/^[^\s>\/:]+:/}},"special-attr":[],"attr-value":{pattern:/=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+)/,inside:{punctuation:[{pattern:/^=/,alias:"attr-equals"},{pattern:/^(\s*)["']|["']$/,lookbehind:!0}]}},punctuation:/\/?>/,"attr-name":{pattern:/[^\s>\/]+/,inside:{namespace:/^[^\s>\/:]+:/}}}},entity:[{pattern:/&[\da-z]{1,8};/i,alias:"named-entity"},/&#x?[\da-f]{1,8};/i]},Prism.languages.markup.tag.inside["attr-value"].inside.entity=Prism.languages.markup.entity,Prism.languages.markup.doctype.inside["internal-subset"].inside=Prism.languages.markup,Prism.hooks.add("wrap",function(e){"entity"===e.type&&(e.attributes.title=e.content.replace(/&/,"&"))}),Object.defineProperty(Prism.languages.markup.tag,"addInlined",{value:function(e,t){var n={},n=(n["language-"+t]={pattern:/(^<!\[CDATA\[)[\s\S]+?(?=\]\]>$)/i,lookbehind:!0,inside:Prism.languages[t]},n.cdata=/^<!\[CDATA\[|\]\]>$/i,{"included-cdata":{pattern:/<!\[CDATA\[[\s\S]*?\]\]>/i,inside:n}}),t=(n["language-"+t]={pattern:/[\s\S]+/,inside:Prism.languages[t]},{});t[e]={pattern:RegExp(/(<__[^>]*>)(?:<!\[CDATA\[(?:[^\]]|\](?!\]>))*\]\]>|(?!<!\[CDATA\[)[\s\S])*?(?=<\/__>)/.source.replace(/__/g,function(){return e}),"i"),lookbehind:!0,greedy:!0,inside:n},Prism.languages.insertBefore("markup","cdata",t)}}),Object.defineProperty(Prism.languages.markup.tag,"addAttribute",{value:function(e,t){Prism.languages.markup.tag.inside["special-attr"].push({pattern:RegExp(/(^|["'\s])/.source+"(?:"+e+")"+/\s*=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+(?=[\s>]))/.source,"i"),lookbehind:!0,inside:{"attr-name":/^[^\s=]+/,"attr-value":{pattern:/=[\s\S]+/,inside:{value:{pattern:/(^=\s*(["']|(?!["'])))\S[\s\S]*(?=\2$)/,lookbehind:!0,alias:[t,"language-"+t],inside:Prism.languages[t]},punctuation:[{pattern:/^=/,alias:"attr-equals"},/"|'/]}}}})}}),Prism.languages.html=Prism.languages.markup,Prism.languages.mathml=Prism.languages.markup,Prism.languages.svg=Prism.languages.markup,Prism.languages.xml=Prism.languages.extend("markup",{}),Prism.languages.ssml=Prism.languages.xml,Prism.languages.atom=Prism.languages.xml,Prism.languages.rss=Prism.languages.xml,function(e){var t=/(?:"(?:\\(?:\r\n|[\s\S])|[^"\\\r\n])*"|'(?:\\(?:\r\n|[\s\S])|[^'\\\r\n])*')/,t=(e.languages.css={comment:/\/\*[\s\S]*?\*\//,atrule:{pattern:RegExp("@[\\w-](?:"+/[^;{\s"']|\s+(?!\s)/.source+"|"+t.source+")*?"+/(?:;|(?=\s*\{))/.source),inside:{rule:/^@[\w-]+/,"selector-function-argument":{pattern:/(\bselector\s*\(\s*(?![\s)]))(?:[^()\s]|\s+(?![\s)])|\((?:[^()]|\([^()]*\))*\))+(?=\s*\))/,lookbehind:!0,alias:"selector"},keyword:{pattern:/(^|[^\w-])(?:and|not|only|or)(?![\w-])/,lookbehind:!0}}},url:{pattern:RegExp("\\burl\\((?:"+t.source+"|"+/(?:[^\\\r\n()"']|\\[\s\S])*/.source+")\\)","i"),greedy:!0,inside:{function:/^url/i,punctuation:/^\(|\)$/,string:{pattern:RegExp("^"+t.source+"$"),alias:"url"}}},selector:{pattern:RegExp("(^|[{}\\s])[^{}\\s](?:[^{};\"'\\s]|\\s+(?![\\s{])|"+t.source+")*(?=\\s*\\{)"),lookbehind:!0},string:{pattern:t,greedy:!0},property:{pattern:/(^|[^-\w\xA0-\uFFFF])(?!\s)[-_a-z\xA0-\uFFFF](?:(?!\s)[-\w\xA0-\uFFFF])*(?=\s*:)/i,lookbehind:!0},important:/!important\b/i,function:{pattern:/(^|[^-a-z0-9])[-a-z0-9]+(?=\()/i,lookbehind:!0},punctuation:/[(){};:,]/},e.languages.css.atrule.inside.rest=e.languages.css,e.languages.markup);t&&(t.tag.addInlined("style","css"),t.tag.addAttribute("style","css"))}(Prism),Prism.languages.clike={comment:[{pattern:/(^|[^\\])\/\*[\s\S]*?(?:\*\/|$)/,lookbehind:!0,greedy:!0},{pattern:/(^|[^\\:])\/\/.*/,lookbehind:!0,greedy:!0}],string:{pattern:/(["'])(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,greedy:!0},"class-name":{pattern:/(\b(?:class|extends|implements|instanceof|interface|new|trait)\s+|\bcatch\s+\()[\w.\\]+/i,lookbehind:!0,inside:{punctuation:/[.\\]/}},keyword:/\b(?:break|catch|continue|do|else|finally|for|function|if|in|instanceof|new|null|return|throw|try|while)\b/,boolean:/\b(?:false|true)\b/,function:/\b\w+(?=\()/,number:/\b0x[\da-f]+\b|(?:\b\d+(?:\.\d*)?|\B\.\d+)(?:e[+-]?\d+)?/i,operator:/[<>]=?|[!=]=?=?|--?|\+\+?|&&?|\|\|?|[?*/~^%]/,punctuation:/[{}[\];(),.:]/},Prism.languages.javascript=Prism.languages.extend("clike",{"class-name":[Prism.languages.clike["class-name"],{pattern:/(^|[^$\w\xA0-\uFFFF])(?!\s)[_$A-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\.(?:constructor|prototype))/,lookbehind:!0}],keyword:[{pattern:/((?:^|\})\s*)catch\b/,lookbehind:!0},{pattern:/(^|[^.]|\.\.\.\s*)\b(?:as|assert(?=\s*\{)|async(?=\s*(?:function\b|\(|[$\w\xA0-\uFFFF]|$))|await|break|case|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally(?=\s*(?:\{|$))|for|from(?=\s*(?:['"]|$))|function|(?:get|set)(?=\s*(?:[#\[$\w\xA0-\uFFFF]|$))|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)\b/,lookbehind:!0}],function:/#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*(?:\.\s*(?:apply|bind|call)\s*)?\()/,number:{pattern:RegExp(/(^|[^\w$])/.source+"(?:"+/NaN|Infinity/.source+"|"+/0[bB][01]+(?:_[01]+)*n?/.source+"|"+/0[oO][0-7]+(?:_[0-7]+)*n?/.source+"|"+/0[xX][\dA-Fa-f]+(?:_[\dA-Fa-f]+)*n?/.source+"|"+/\d+(?:_\d+)*n/.source+"|"+/(?:\d+(?:_\d+)*(?:\.(?:\d+(?:_\d+)*)?)?|\.\d+(?:_\d+)*)(?:[Ee][+-]?\d+(?:_\d+)*)?/.source+")"+/(?![\w$])/.source),lookbehind:!0},operator:/--|\+\+|\*\*=?|=>|&&=?|\|\|=?|[!=]==|<<=?|>>>?=?|[-+*/%&|^!=<>]=?|\.{3}|\?\?=?|\?\.?|[~:]/}),Prism.languages.javascript["class-name"][0].pattern=/(\b(?:class|extends|implements|instanceof|interface|new)\s+)[\w.\\]+/,Prism.languages.insertBefore("javascript","keyword",{regex:{pattern:RegExp(/((?:^|[^$\w\xA0-\uFFFF."'\])\s]|\b(?:return|yield))\s*)/.source+/\//.source+"(?:"+/(?:\[(?:[^\]\\\r\n]|\\.)*\]|\\.|[^/\\\[\r\n])+\/[dgimyus]{0,7}/.source+"|"+/(?:\[(?:[^[\]\\\r\n]|\\.|\[(?:[^[\]\\\r\n]|\\.|\[(?:[^[\]\\\r\n]|\\.)*\])*\])*\]|\\.|[^/\\\[\r\n])+\/[dgimyus]{0,7}v[dgimyus]{0,7}/.source+")"+/(?=(?:\s|\/\*(?:[^*]|\*(?!\/))*\*\/)*(?:$|[\r\n,.;:})\]]|\/\/))/.source),lookbehind:!0,greedy:!0,inside:{"regex-source":{pattern:/^(\/)[\s\S]+(?=\/[a-z]*$)/,lookbehind:!0,alias:"language-regex",inside:Prism.languages.regex},"regex-delimiter":/^\/|\/$/,"regex-flags":/^[a-z]+$/}},"function-variable":{pattern:/#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*[=:]\s*(?:async\s*)?(?:\bfunction\b|(?:\((?:[^()]|\([^()]*\))*\)|(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*)\s*=>))/,alias:"function"},parameter:[{pattern:/(function(?:\s+(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*)?\s*\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\))/,lookbehind:!0,inside:Prism.languages.javascript},{pattern:/(^|[^$\w\xA0-\uFFFF])(?!\s)[_$a-z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*=>)/i,lookbehind:!0,inside:Prism.languages.javascript},{pattern:/(\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\)\s*=>)/,lookbehind:!0,inside:Prism.languages.javascript},{pattern:/((?:\b|\s|^)(?!(?:as|async|await|break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)(?![$\w\xA0-\uFFFF]))(?:(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*\s*)\(\s*|\]\s*\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\)\s*\{)/,lookbehind:!0,inside:Prism.languages.javascript}],constant:/\b[A-Z](?:[A-Z_]|\dx?)*\b/}),Prism.languages.insertBefore("javascript","string",{hashbang:{pattern:/^#!.*/,greedy:!0,alias:"comment"},"template-string":{pattern:/`(?:\\[\s\S]|\$\{(?:[^{}]|\{(?:[^{}]|\{[^}]*\})*\})+\}|(?!\$\{)[^\\`])*`/,greedy:!0,inside:{"template-punctuation":{pattern:/^`|`$/,alias:"string"},interpolation:{pattern:/((?:^|[^\\])(?:\\{2})*)\$\{(?:[^{}]|\{(?:[^{}]|\{[^}]*\})*\})+\}/,lookbehind:!0,inside:{"interpolation-punctuation":{pattern:/^\$\{|\}$/,alias:"punctuation"},rest:Prism.languages.javascript}},string:/[\s\S]+/}},"string-property":{pattern:/((?:^|[,{])[ \t]*)(["'])(?:\\(?:\r\n|[\s\S])|(?!\2)[^\\\r\n])*\2(?=\s*:)/m,lookbehind:!0,greedy:!0,alias:"property"}}),Prism.languages.insertBefore("javascript","operator",{"literal-property":{pattern:/((?:^|[,{])[ \t]*)(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*:)/m,lookbehind:!0,alias:"property"}}),Prism.languages.markup&&(Prism.languages.markup.tag.addInlined("script","javascript"),Prism.languages.markup.tag.addAttribute(/on(?:abort|blur|change|click|composition(?:end|start|update)|dblclick|error|focus(?:in|out)?|key(?:down|up)|load|mouse(?:down|enter|leave|move|out|over|up)|reset|resize|scroll|select|slotchange|submit|unload|wheel)/.source,"javascript")),Prism.languages.js=Prism.languages.javascript,function(){var l,u,g,c,e;void 0!==Prism&&"undefined"!=typeof document&&(Element.prototype.matches||(Element.prototype.matches=Element.prototype.msMatchesSelector||Element.prototype.webkitMatchesSelector),l={js:"javascript",py:"python",rb:"ruby",ps1:"powershell",psm1:"powershell",sh:"bash",bat:"batch",h:"c",tex:"latex"},c="pre[data-src]:not(["+(u="data-src-status")+'="loaded"]):not(['+u+'="'+(g="loading")+'"])',Prism.hooks.add("before-highlightall",function(e){e.selector+=", "+c}),Prism.hooks.add("before-sanity-check",function(e){var r,t,n,a,s,i,o=e.element;o.matches(c)&&(e.code="",o.setAttribute(u,g),(r=o.appendChild(document.createElement("CODE"))).textContent="Loading…",t=o.getAttribute("data-src"),"none"===(e=e.language)&&(n=(/\.(\w+)$/.exec(t)||[,"none"])[1],e=l[n]||n),Prism.util.setLanguage(r,e),Prism.util.setLanguage(o,e),(n=Prism.plugins.autoloader)&&n.loadLanguages(e),n=t,a=function(e){o.setAttribute(u,"loaded");var t,n,a=function(e){var t,n;if(e=/^\s*(\d+)\s*(?:(,)\s*(?:(\d+)\s*)?)?$/.exec(e||""))return t=Number(e[1]),n=e[2],e=e[3],n?e?[t,Number(e)]:[t,void 0]:[t,t]}(o.getAttribute("data-range"));a&&(t=e.split(/\r\n?|\n/g),n=a[0],a=null==a[1]?t.length:a[1],n<0&&(n+=t.length),n=Math.max(0,Math.min(n-1,t.length)),a<0&&(a+=t.length),a=Math.max(0,Math.min(a,t.length)),e=t.slice(n,a).join("\n"),o.hasAttribute("data-start")||o.setAttribute("data-start",String(n+1))),r.textContent=e,Prism.highlightElement(r)},s=function(e){o.setAttribute(u,"failed"),r.textContent=e},(i=new XMLHttpRequest).open("GET",n,!0),i.onreadystatechange=function(){4==i.readyState&&(i.status<400&&i.responseText?a(i.responseText):400<=i.status?s("✖ Error "+i.status+" while fetching file: "+i.statusText):s("✖ Error: File does not exist or is empty"))},i.send(null))}),e=!(Prism.plugins.fileHighlight={highlight:function(e){for(var t,n=(e||document).querySelectorAll(c),a=0;t=n[a++];)Prism.highlightElement(t)}}),Prism.fileHighlight=function(){e||(console.warn("Prism.fileHighlight is deprecated. Use `Prism.plugins.fileHighlight.highlight` instead."),e=!0),Prism.plugins.fileHighlight.highlight.apply(this,arguments)})}();
|
package/js/script.js
ADDED
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
const points = carnationPoints("#myBox", {
|
|
2
|
+
breakpoints: [
|
|
3
|
+
{ name: "mobile", max: 767 },
|
|
4
|
+
{ name: "tablet", min: 768, max: 1023 },
|
|
5
|
+
{ name: "desktop", min: 1024 },
|
|
6
|
+
],
|
|
7
|
+
onInit(point) {
|
|
8
|
+
if (point.breakpoint) {
|
|
9
|
+
document.querySelector(
|
|
10
|
+
"#myBox"
|
|
11
|
+
).textContent = `Example: ${point.breakpoint}`;
|
|
12
|
+
}
|
|
13
|
+
},
|
|
14
|
+
onChange(point) {
|
|
15
|
+
//console.log("Breakpoint changed to:", point.breakpoint);
|
|
16
|
+
document.querySelector(
|
|
17
|
+
"#myBox"
|
|
18
|
+
).textContent = `Example: ${point.breakpoint}`;
|
|
19
|
+
},
|
|
20
|
+
});
|
package/package.json
ADDED
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "carnationpoints",
|
|
3
|
+
"version": "1.0.0",
|
|
4
|
+
"description": "Responsive Breakpoints",
|
|
5
|
+
"main": "index.js",
|
|
6
|
+
"scripts": {
|
|
7
|
+
"test": "echo \"Error: no test specified\" && exit 1"
|
|
8
|
+
},
|
|
9
|
+
"repository": {
|
|
10
|
+
"type": "git",
|
|
11
|
+
"url": "git+https://github.com/Hitesh82/carnationpoints.git"
|
|
12
|
+
},
|
|
13
|
+
"keywords": [
|
|
14
|
+
"responsive",
|
|
15
|
+
"breakpoints",
|
|
16
|
+
"responsive",
|
|
17
|
+
"design",
|
|
18
|
+
"viewport",
|
|
19
|
+
"Breakpoints",
|
|
20
|
+
"Adaptive",
|
|
21
|
+
"Breakpoints",
|
|
22
|
+
"breakpoints",
|
|
23
|
+
"media",
|
|
24
|
+
"queries",
|
|
25
|
+
"window",
|
|
26
|
+
"resize",
|
|
27
|
+
"custom",
|
|
28
|
+
"breakpoint",
|
|
29
|
+
"layout",
|
|
30
|
+
"breakpoints",
|
|
31
|
+
"dynamic",
|
|
32
|
+
"breakpoints",
|
|
33
|
+
"javascript",
|
|
34
|
+
"mobile",
|
|
35
|
+
"first",
|
|
36
|
+
"Flex",
|
|
37
|
+
"Breakpoints"
|
|
38
|
+
],
|
|
39
|
+
"author": "Hitesh Patel",
|
|
40
|
+
"license": "ISC",
|
|
41
|
+
"bugs": {
|
|
42
|
+
"url": "https://github.com/Hitesh82/carnationpoints/issues"
|
|
43
|
+
},
|
|
44
|
+
"homepage": "https://github.com/Hitesh82/carnationpoints#readme"
|
|
45
|
+
}
|