@cocreate/scrollbar 0.0.0-stage → 1.12.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.
@@ -0,0 +1,439 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="utf-8" />
5
+ <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
7
+ <title>CoCreate-overlay-scroll Documentation | CoCreateJS</title>
8
+ <link
9
+ rel="icon"
10
+ type="image/png"
11
+ sizes="32x32"
12
+ href="https://CoCreateJS.com/images/favicon.ico" />
13
+ <meta
14
+ name="description"
15
+ content="A simple yet powerful drag-and-drop solution powered by javascript." />
16
+ <meta
17
+ name="keywords"
18
+ content="drag and drop, colaboration, dnd utility, drag and drop utility" />
19
+ <meta name="robots" content="index,follow" />
20
+ <meta
21
+ property="og:image"
22
+ content="https://cdn.CoCreateJS.com/docs/CoCreate-overlay-scroll.png" />
23
+
24
+ <link
25
+ rel="stylesheet"
26
+ href="../index.css"
27
+ array="files"
28
+ object="60888216117c640e7596303f"
29
+ key="src"
30
+ type="text/css"
31
+ save="true" />
32
+ <link rel="manifest" href="/manifest.webmanifest" />
33
+ </head>
34
+
35
+ <body>
36
+ <!-- Navbar -->
37
+ <nav
38
+ class="width:100% display:flex align-items:center background:transparent padding-top:10px padding-bottom:10px"
39
+ content_id="content"
40
+ scroll="sticky-nav,"
41
+ scroll-up="5"
42
+ scroll-down="5"
43
+ path="../"
44
+ src="../components/navbar.html"></nav>
45
+ <sidenav
46
+ id="menuL"
47
+ class="position:fixed top:0px left:0px overflow:hidden background:whitesmoke height:100vh width:0px width:300px@xl"
48
+ resizable
49
+ resize-query="[content_id='content']"
50
+ resize-property="margin-left"
51
+ resize-value="width">
52
+ <menu
53
+ array="files"
54
+ object="603717b07de7fb350ae9fec8"
55
+ key="src"></menu>
56
+ <div resize="right"></div>
57
+ </sidenav>
58
+ <main
59
+ class="padding-top:15px padding:15px@lg@xl"
60
+ content_id="content"
61
+ id="CoCreate-overlay-scroll">
62
+ <div
63
+ class="display:flex flex-wrap:wrap justify-content:space-between position:relative margin:10px">
64
+ <div class="display:flex align-items:center">
65
+ <h2>CoCreate-overlay-scroll</h2>
66
+ </div>
67
+ <div
68
+ class="display:flex align-items:center font-size:20px position:absolute right:0 padding:5px background:white">
69
+ <div
70
+ class="display:flex align-items:center transition:0.3s padding-left:10px"
71
+ share-network="true"
72
+ share-text="Enter decription here"
73
+ share-title="testing im a title"
74
+ share-height="600"
75
+ share-width="700"
76
+ share-media="https://cdn.CoCreateJS.com/docs/overlay-scroll.png"
77
+ hover="display:block!important"
78
+ hover-query=".social-networks">
79
+ <div class="display:none social-networks">
80
+ <a
81
+ class="margin-right:15px"
82
+ share-network="twitter"
83
+ title="Share on twitter"
84
+ ><i src="/assets/svg/twitter.svg"></i
85
+ ></a>
86
+ <a
87
+ class="margin-right:15px"
88
+ share-network="facebook"
89
+ title="Share on Facebook"
90
+ ><i src="/assets/svg/facebook.svg"></i
91
+ ></a>
92
+ <a
93
+ class="margin-right:15px"
94
+ share-network="instagram"
95
+ title="Share on instagram"
96
+ ><i src="/assets/svg/instagram.svg"></i
97
+ ></a>
98
+ </div>
99
+ <a
100
+ class="margin-right:15px"
101
+ share-network="share"
102
+ title="Share on share"
103
+ ><i src="/assets/svg/share-alt.svg"></i
104
+ ></a>
105
+ </div>
106
+ <a
107
+ href="https://github.com/CoCreateJS/CoCreate-dnd"
108
+ target="_blank"
109
+ class=""
110
+ ><i src="/assets/svg/github.svg"></i
111
+ ></a>
112
+ </div>
113
+ </div>
114
+ <h1
115
+ class="max-width:500px margin:20px_10px line-height:1.5 font-size:16px font-weight:100">
116
+ CoCreate-overlay-scroll javascript component. Easy configuration
117
+ using HTML5 attributes or Javscript api and highly styleable.
118
+ </h1>
119
+ <div
120
+ id="overlay-scroll-section"
121
+ class="display:flex flex-wrap:wrap">
122
+ <div
123
+ class="flex-grow:1 width:400px width:300px@xs padding:0px_10px margin-top:60px">
124
+ <div
125
+ id="overlay-scroll-install"
126
+ class="border-bottom:1px_solid_lightgrey"
127
+ scroll
128
+ scroll-intersect="color:dodgerblue"
129
+ scroll-query="#overlay-scroll-install-section">
130
+ <span
131
+ class="display:flex align-items:center width:fit-content"
132
+ hover="display:block!important"
133
+ hover-query="[href='#overlay-scroll-install']">
134
+ <h2 class="padding:5px_0px">Install</h2>
135
+ <a
136
+ class="margin-left:10px display:none"
137
+ href="#overlay-scroll-install"
138
+ ><i src="/assets/svg/link.svg"></i
139
+ ></a>
140
+ </span>
141
+ </div>
142
+ <pre><code class="language-bash">npm i @cocreate/overlay-scroll</code></pre>
143
+ <p class="padding:10px_0px line-height:1.5">
144
+ Or you can use cdn link:
145
+ </p>
146
+ <pre><code class="language-html">&lt;script&gt;https://cdn.CoCreateJS.com/overlay-scroll/latest/CoCreate-overlay-scroll.min.js&lt;/script&gt;</code></pre>
147
+ <!-- <p class="padding:10px_0px line-height:1.5">for styling please refer to #id-style</p> -->
148
+
149
+ <div
150
+ id="overlay-scroll-usage"
151
+ class="margin-top:80px border-bottom:1px_solid_lightgrey"
152
+ scroll
153
+ scroll-intersect="color:dodgerblue"
154
+ scroll-query="#overlay-scroll-usage-section">
155
+ <span
156
+ class="display:flex align-items:center width:fit-content"
157
+ hover="display:block!important"
158
+ hover-query="[href='#overlay-scroll-usage']">
159
+ <h2 class="padding:5px_0px">Usage</h2>
160
+ <a
161
+ class="margin-left:10px display:none"
162
+ href="#overlay-scroll-usage"
163
+ ><i src="/assets/svg/link.svg"></i
164
+ ></a>
165
+ </span>
166
+ </div>
167
+ <p class="padding:10px_0px line-height:1.5">
168
+ CoCreate-overlay-scroll would hide the native
169
+ scrollbars, and render the overlay scrollbars by
170
+ attributes, and provide the features including dragable,
171
+ clickable, scrollable.
172
+ </p>
173
+
174
+ <h3
175
+ class="border-bottom:1px_solid_lightgrey margin-top:40px padding:5px_0px">
176
+ Example
177
+ </h3>
178
+ <p class="padding:10px_0px line-height:1.5"></p>
179
+
180
+ <!-- <h4 class="margin-top:20px padding:5px_0px">Fetch Array case</h4> -->
181
+ <div class="margin-top:10px">
182
+ <pre>
183
+ <code class="language-html">
184
+ &lt;div class="co_overlay-scroll dark-mode"
185
+ data-overlay-scroll_type="scrollX;scrollY"
186
+ data-overlay-scroll_visible="auto"
187
+ data-overlay-scroll_pos="bottom;left"
188
+ style="width:300px;height:300px"&gt;
189
+ &lt;img src="https://mdbootstrap.com/img/Photos/Others/img%20(44).jpg"/&gt;
190
+ &lt;/div&gt;
191
+ </code>
192
+ </pre>
193
+ </div>
194
+
195
+ <br />
196
+ <h3
197
+ class="border-bottom:1px_solid_lightgrey margin-top:20px padding:5px_0px">
198
+ Classes
199
+ </h3>
200
+ <ul class="list-style-type:none">
201
+ <li
202
+ class="padding:15px_0px border-bottom:1px_solid_lightgrey">
203
+ <h4>
204
+ <span>co_overlay-scroll</span>
205
+ <span class="cocreate-badge danger"
206
+ >required</span
207
+ >
208
+ </h4>
209
+ <p>
210
+ Template main class. This class should be
211
+ defined.
212
+ </p>
213
+ </li>
214
+ <li
215
+ class="padding:15px_0px border-bottom:1px_solid_lightgrey">
216
+ <h4>
217
+ <span>dark-mode</span>
218
+ <span class="cocreate-badge warning"
219
+ >optional</span
220
+ >
221
+ </h4>
222
+ <p>
223
+ Scrollbar theme mode. if not set, it will be
224
+ light-mode as default.
225
+ </p>
226
+ </li>
227
+ </ul>
228
+ <br />
229
+
230
+ <div
231
+ id="overlay-scroll-attributes"
232
+ class="margin-top:80px border-bottom:1px_solid_lightgrey"
233
+ scroll
234
+ scroll-intersect="color:dodgerblue"
235
+ scroll-query="#overlay-scroll-attributes-section">
236
+ <span
237
+ class="display:flex align-items:center width:fit-content"
238
+ hover="display:block!important"
239
+ hover-query="[href='#overlay-scroll-attributes']">
240
+ <h2 class="padding:5px_0px">Attributes</h2>
241
+ <a
242
+ class="margin-left:10px display:none"
243
+ href="#overlay-scroll-attributes"
244
+ ><i src="/assets/svg/link.svg"></i
245
+ ></a>
246
+ </span>
247
+ </div>
248
+
249
+ <ul class="list-style-type:none">
250
+ <li
251
+ class="padding:15px_0px border-bottom:1px_solid_lightgrey">
252
+ <h4>
253
+ <span>overlay-scroll_type</span>
254
+ <span class="cocreate-badge success"
255
+ >string</span
256
+ >
257
+ <span class="cocreate-badge warning"
258
+ >optional</span
259
+ >
260
+ </h4>
261
+ <p>
262
+ ScrollBar Enable/Disable. "scrollX" and
263
+ "scrollY" are available. if not set, it will be
264
+ enable the x-scrollbar and y-scrollbar as
265
+ default.
266
+ </p>
267
+ </li>
268
+ <li
269
+ class="padding:15px_0px border-bottom:1px_solid_lightgrey">
270
+ <h4>
271
+ <span>overlay-scroll_visible</span>
272
+ <span class="cocreate-badge success"
273
+ >string</span
274
+ >
275
+ <span class="cocreate-badge warning"
276
+ >optional</span
277
+ >
278
+ </h4>
279
+ <p>
280
+ ScrollBar Behavior. "visible" and "hide", "auto"
281
+ are available. if not set, it will be visable as
282
+ default.
283
+ </p>
284
+ </li>
285
+ <li
286
+ class="padding:15px_0px border-bottom:1px_solid_lightgrey">
287
+ <h4>
288
+ <span>overlay-scroll_pos</span>
289
+ <span class="cocreate-badge success"
290
+ >string</span
291
+ >
292
+ <span class="cocreate-badge warning"
293
+ >optional</span
294
+ >
295
+ </h4>
296
+ <p>
297
+ ScrollBar Position. "bottom" and "top", "right",
298
+ "left" are available. if not set, it will be
299
+ "bottom" and "right" as default.
300
+ </p>
301
+ </li>
302
+ </ul>
303
+
304
+ <h2
305
+ class="border-bottom:1px_solid_lightgrey margin-top:20px padding:5px_0px">
306
+ How Does It Works
307
+ </h2>
308
+ <p>
309
+ CoCreate-overlay-scroll works based on cocreate.js and
310
+ template.
311
+ </p>
312
+
313
+ <h2
314
+ class="border-bottom:1px_solid_lightgrey margin-top:20px padding:5px_0px">
315
+ Effects and Styles
316
+ </h2>
317
+
318
+ <h2
319
+ class="border-bottom:1px_solid_lightgrey margin-top:20px padding:5px_0px">
320
+ Events
321
+ </h2>
322
+ <h4>
323
+ <span>fetchedData</span
324
+ ><span class="cocreate-badge success"></span>
325
+ </h4>
326
+ </div>
327
+
328
+ <div
329
+ class="flex-grow:1 width:300px padding:0px_10px margin-top:60px border-bottom:1px_solid_lightgrey">
330
+ <!-- SandBox -->
331
+ <div
332
+ id="overlay-scroll-demo"
333
+ class="border-bottom:1px_solid_lightgrey"
334
+ scroll
335
+ scroll-intersect="color:dodgerblue"
336
+ scroll-query="#overlay-scroll-demo-section">
337
+ <span
338
+ class="display:flex align-items:center width:fit-content"
339
+ hover="display:block!important"
340
+ hover-query="[href='#overlay-scroll-demo']">
341
+ <h2 class="padding:5px_0px">Demo</h2>
342
+ <a
343
+ class="margin-left:10px display:none"
344
+ href="#overlay-scroll-demo"
345
+ ><i src="/assets/svg/link.svg"></i
346
+ ></a>
347
+ </span>
348
+ </div>
349
+ <div
350
+ class="position:sticky top:0 padding:15px_0px height:100vh">
351
+ <!-- SandBox -->
352
+ <div
353
+ class="display:flex flex-direction:column position:relative overflow:hidden card border-radius:2px width:auto height:600px margin-top:20px"
354
+ id="playground">
355
+ <div
356
+ id="demo-code"
357
+ resizable
358
+ class="position:relative height:50%">
359
+ <textarea
360
+ type="code"
361
+ lang="html"
362
+ array="demos"
363
+ object=""
364
+ key="demo"
365
+ save="false"
366
+ id="demo"
367
+ class="height:100% width:100% outline:none border:none resize:none padding:5px"></textarea>
368
+ <div
369
+ resize="bottom"
370
+ class="background:lightgrey"></div>
371
+ </div>
372
+
373
+ <div
374
+ id="demo-preview"
375
+ class="position:relative overflow:auto background-color:white">
376
+ <div class="demopreview padding:20px"></div>
377
+ </div>
378
+
379
+ <div
380
+ class="font-size:20px position:absolute top:10px right:10px opacity:0.6">
381
+ <a
382
+ class="margin-right:10px"
383
+ id="eye"
384
+ show="#eye-slash"
385
+ hide="#eye, #demo-preview"
386
+ toggle="code-height"
387
+ toggle-query="#demo-code"
388
+ ><i
389
+ class="height:18px"
390
+ src="/assets/svg/eye.svg"></i
391
+ ></a>
392
+ <a
393
+ class="margin-right:10px"
394
+ hidden
395
+ id="eye-slash"
396
+ show="#eye, #demo-preview"
397
+ hide="#eye-slash"
398
+ toggle="code-height"
399
+ toggle-query="#demo-code"
400
+ ><i src="/assets/svg/eye-slash.svg"></i
401
+ ></a>
402
+ <a
403
+ class="margin-right:10px"
404
+ id="code"
405
+ show="#code-slash"
406
+ hide="#code, #demo-code"
407
+ ><i src="/assets/svg/code.svg"></i
408
+ ></a>
409
+ <a
410
+ class="margin-right:10px"
411
+ hidden
412
+ id="code-slash"
413
+ show="#code, #demo-code"
414
+ hide="#code-slash"
415
+ ><i
416
+ class="height:18px"
417
+ src="/assets/svg/code.svg"></i
418
+ ></a>
419
+ <a
420
+ class="margin-right:5px"
421
+ fullscreen
422
+ fullscreen-query="#playground"></a>
423
+ </div>
424
+ </div>
425
+ <!-- End SandBox -->
426
+ </div>
427
+ </div>
428
+ </div>
429
+ <button
430
+ href="https://github.com/CoCreateJS/CoCreate-overlay-scroll/tree/master/docs/index.html?message=docs%3A%20describe%20your%20change..."
431
+ target="_blank"
432
+ class="display:flex justify-content:center align-items:center position:fixed bottom:15px right:15px height:50px width:50px border-radius:50% box-shadow:0px_2px_10px_0px_rgba(0,_0,_0,_0.4)">
433
+ <i src="../assets/svg/pencil-alt.svg"></i>
434
+ </button>
435
+ </main>
436
+
437
+ <script src="https://CoCreateJS.com/dist/CoCreate.js"></script>
438
+ </body>
439
+ </html>
package/package.json CHANGED
@@ -1,6 +1,56 @@
1
1
  {
2
2
  "name": "@cocreate/scrollbar",
3
- "version": "0.0.0-stage",
4
- "stub": true,
5
- "description": "Temporary package placeholder for staged publishing"
6
- }
3
+ "version": "1.12.0",
4
+ "description": "A declarative custom scrollbar for native scroll containers with configurable axes, track positions, visibility, and automatic DOM lifecycle handling.",
5
+ "keywords": [
6
+ "scrollbar",
7
+ "low-code",
8
+ "realtime",
9
+ "realtime-framework",
10
+ "collaboration",
11
+ "shared-editing",
12
+ "html5-framework",
13
+ "javascript-framework"
14
+ ],
15
+ "publishConfig": {
16
+ "access": "public"
17
+ },
18
+ "scripts": {
19
+ "start": "webpack --config webpack.config.js",
20
+ "build": "webpack --mode=production --config webpack.config.js",
21
+ "dev": "webpack --config webpack.config.js --watch"
22
+ },
23
+ "repository": {
24
+ "type": "git",
25
+ "url": "git+https://github.com/CoCreateJS/scrollbar.git"
26
+ },
27
+ "author": "CoCreate LLC",
28
+ "license": "MIT",
29
+ "bugs": {
30
+ "url": "https://github.com/CoCreateJS/scrollbar/issues"
31
+ },
32
+ "homepage": "https://CoCreateJS.com/docs/scrollbar",
33
+ "funding": {
34
+ "type": "GitHub Sponsors ❤",
35
+ "url": "https://github.com/sponsors/CoCreateJS"
36
+ },
37
+ "main": "./src/index.js",
38
+ "dependencies": {
39
+ "@cocreate/observer": "^1.23.0"
40
+ },
41
+ "devDependencies": {
42
+ "@cocreate/webpack": "^1.9.0",
43
+ "css-loader": "^5.1.3",
44
+ "esbuild": "^0.25.2",
45
+ "esbuild-loader": "^4.3.0",
46
+ "mini-css-extract-plugin": "^1.5.0",
47
+ "webpack": "^5.24.4",
48
+ "webpack-cli": "^4.5.0",
49
+ "webpack-log": "^3.0.1"
50
+ },
51
+ "allowScripts": {
52
+ "@cocreate/webpack@1.4.3": true,
53
+ "esbuild@0.25.12": true,
54
+ "esbuild@0.28.1": true
55
+ }
56
+ }
@@ -0,0 +1,16 @@
1
+ module.exports = {
2
+ tabWidth: 4,
3
+ semi: true,
4
+ trailingComma: "none",
5
+ bracketSameLine: true,
6
+ useTabs: true,
7
+ overrides: [
8
+ {
9
+ files: ["*.json", "*.yml", "*.yaml"],
10
+ options: {
11
+ tabWidth: 2,
12
+ useTabs: false
13
+ },
14
+ }
15
+ ],
16
+ };
@@ -0,0 +1,30 @@
1
+ module.exports = {
2
+ dryRun: false,
3
+ branches: ["main"],
4
+ plugins: [
5
+ "@semantic-release/commit-analyzer",
6
+ "@semantic-release/release-notes-generator",
7
+ [
8
+ "@semantic-release/changelog",
9
+ {
10
+ changelogFile: "CHANGELOG.md",
11
+ },
12
+ ],
13
+ "@semantic-release/npm",
14
+ [
15
+ "@semantic-release/github",
16
+ {
17
+ successComment: false,
18
+ failTitle: false,
19
+ },
20
+ ],
21
+ [
22
+ "@semantic-release/git",
23
+ {
24
+ // Only stage and commit the changelog and package.json
25
+ assets: ["CHANGELOG.md", "package.json"],
26
+ message: "chore(release): ${nextRelease.version} [skip ci]",
27
+ },
28
+ ],
29
+ ],
30
+ };