mirror of
https://github.com/tabler/tabler.git
synced 2025-12-21 17:34:25 +04:00
Merge remote-tracking branch 'origin/main'
This commit is contained in:
codecalm
5465
package-lock.json
generated
5465
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
10
package.json
10
package.json
@@ -73,7 +73,9 @@
|
||||
"countup.js": "^2.1.0",
|
||||
"critical": "^4.0.1",
|
||||
"cross-spawn": "^7.0.3",
|
||||
"dropzone": "^6.0.0-beta.2",
|
||||
"flatpickr": "^4.6.13",
|
||||
"fslightbox": "^3.3.1",
|
||||
"gulp": "^4.0.2",
|
||||
"gulp-clean": "^0.4.0",
|
||||
"gulp-clean-css": "^4.3.0",
|
||||
@@ -114,11 +116,13 @@
|
||||
"choices.js": "^10.1.0",
|
||||
"countup.js": "^2.1.0",
|
||||
"flatpickr": "^4.6.13",
|
||||
"fslightbox": "^3.3.1",
|
||||
"imask": "^6.4.2",
|
||||
"jsvectormap": "^1.4.5",
|
||||
"list.js": "^2.3.1",
|
||||
"litepicker": "^2.0.12",
|
||||
"nouislider": "^15.6.0",
|
||||
"dropzone": "^6.0.0-beta.2",
|
||||
"tom-select": "^2.0.1",
|
||||
"plyr": "^3.7.2",
|
||||
"tinymce": "^6.0.3"
|
||||
@@ -136,9 +140,15 @@
|
||||
"countup.js": {
|
||||
"optional": true
|
||||
},
|
||||
"dropzone": {
|
||||
"optional": true
|
||||
},
|
||||
"flatpickr": {
|
||||
"optional": true
|
||||
},
|
||||
"fslightbox": {
|
||||
"optional": true
|
||||
},
|
||||
"imask": {
|
||||
"optional": true
|
||||
},
|
||||
|
||||
@@ -184,6 +184,9 @@ plugins:
|
||||
charts:
|
||||
title: Charts
|
||||
url: docs/charts.html
|
||||
dropzone:
|
||||
title: Dropzone
|
||||
url: docs/dropzone.html
|
||||
plyr:
|
||||
title: Inline player
|
||||
url: docs/inline-player.html
|
||||
|
||||
@@ -19,11 +19,14 @@
|
||||
"jsvectormap": "jsvectormap/dist/js/jsvectormap.min.js",
|
||||
"jsvectormap-world": "jsvectormap/dist/maps/world.js",
|
||||
"jsvectormap-world-merc": "jsvectormap/dist/maps/world-merc.js",
|
||||
"fslightbox": "fslightbox/index.js",
|
||||
"tinymce" :"tinymce/tinymce.min.js",
|
||||
"plyr": "plyr/dist/plyr.min.js"
|
||||
"plyr": "plyr/dist/plyr.min.js",
|
||||
"dropzone": "dropzone/dist/dropzone-min.js"
|
||||
},
|
||||
"css": {
|
||||
"mapbox": "https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.css",
|
||||
"dropzone": "dropzone/dist/dropzone.css",
|
||||
"plyr": "plyr/dist/plyr.css"
|
||||
},
|
||||
"js-copy": {
|
||||
|
||||
@@ -96,6 +96,14 @@ base:
|
||||
markdown:
|
||||
title: Markdown
|
||||
url: markdown.html
|
||||
dropzone:
|
||||
title: Dropzone
|
||||
url: dropzone.html
|
||||
badge: New
|
||||
lightbox:
|
||||
title: Lightbox
|
||||
url: lightbox.html
|
||||
badge: New
|
||||
tinymce:
|
||||
title: TinyMCE
|
||||
url: tinymce.html
|
||||
|
||||
27
src/pages/_docs/dropzone.md
Normal file
27
src/pages/_docs/dropzone.md
Normal file
@@ -0,0 +1,27 @@
|
||||
---
|
||||
title: Dropzone
|
||||
menu: docs.plugins.dropzone
|
||||
libs: dropzone
|
||||
description: Dropzone is a simple JavaScript library that helps you add file drag and drop functionality to your web forms. It is one of the most popular drag and drop library on the web and is used by millions of people.
|
||||
---
|
||||
|
||||
## Default Dropzone
|
||||
|
||||
{% capture code %}
|
||||
{% include ui/dropzone.html id="default" %}
|
||||
{% endcapture %}
|
||||
{% include example.html code=code %}
|
||||
|
||||
## Add multiple files
|
||||
|
||||
{% capture code %}
|
||||
{% include ui/dropzone.html id="mulitple" multiple=true %}
|
||||
{% endcapture %}
|
||||
{% include example.html code=code %}
|
||||
|
||||
## Custom Dropzone
|
||||
|
||||
{% capture code %}
|
||||
{% include ui/dropzone.html id="custom" custom="true" text='Your text here' description="Your custom description here"%}
|
||||
{% endcapture %}
|
||||
{% include example.html code=code %}
|
||||
26
src/pages/_includes/ui/dropzone.html
Normal file
26
src/pages/_includes/ui/dropzone.html
Normal file
@@ -0,0 +1,26 @@
|
||||
{% assign id = include.id %}
|
||||
{% assign text = include.text | default: "Text"%}
|
||||
{% assign description = include.description | default: "Description" %}
|
||||
|
||||
<form class="dropzone" id="dropzone-{{ id }}" action=".">
|
||||
<div class="fallback">
|
||||
<input name="file" type="file" {% if include.multiple %} multiple {% endif %} />
|
||||
</div>
|
||||
{% if include.custom %}
|
||||
<div class="dz-message">
|
||||
<h3 class="dropzone-msg-title">{{text}}</h3>
|
||||
<span class="dropzone-msg-desc">{{description}}</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
</form>
|
||||
|
||||
{% capture_global scripts %}
|
||||
<script>
|
||||
// @formatter:off
|
||||
{% if jekyll.environment == 'development' %}window.tabler_dropzone = window.tabler_dropzone || {};{% endif %}
|
||||
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
{% if jekyll.environment == 'development' %}window.tabler_dropzone["dropzone-{{ id }}"] = {% endif %}new Dropzone("#dropzone-{{ id }}")
|
||||
})
|
||||
</script>
|
||||
{% endcapture_global %}
|
||||
34
src/pages/dropzone.html
Normal file
34
src/pages/dropzone.html
Normal file
@@ -0,0 +1,34 @@
|
||||
---
|
||||
title: Dropzone
|
||||
page-header: Dropzone
|
||||
menu: base.dropzone
|
||||
libs: dropzone
|
||||
---
|
||||
|
||||
|
||||
<div class="row row-cards">
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">Basic Usage</h3>
|
||||
{% include ui/dropzone.html id="default" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">Multiple File Upload</h3>
|
||||
{% include ui/dropzone.html id="multiple" multiple=true %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">Custom Dropzone</h3>
|
||||
{% include ui/dropzone.html id="custom" custom=true text="Your text here" description="Your custom description here" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
18
src/pages/lightbox.html
Normal file
18
src/pages/lightbox.html
Normal file
@@ -0,0 +1,18 @@
|
||||
---
|
||||
title: Lightbox
|
||||
page-header: Lightbox
|
||||
libs: fslightbox
|
||||
menu: base.lightbox
|
||||
---
|
||||
|
||||
{% assign photos = site.data.photos | where: "horizontal", true %}
|
||||
|
||||
<div class="row row-cols-6 g-3">
|
||||
{% for photo in photos %}
|
||||
<div class="col">
|
||||
<a data-fslightbox="gallery" href="/static/photos/{{ photo.file }}">
|
||||
<img src="/static/photos/{{ photo.file }}" alt="{{ photo.title }}" class="rounded">
|
||||
</a>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
@@ -5,5 +5,7 @@
|
||||
@import "vendor/tom-select";
|
||||
@import "vendor/apexcharts";
|
||||
@import "vendor/jsvectormap";
|
||||
@import "vendor/dropzone";
|
||||
@import "vendor/fslightbox";
|
||||
@import "vendor/plyr";
|
||||
@import "vendor/tinymce";
|
||||
|
||||
27
src/scss/vendor/_dropzone.scss
vendored
Normal file
27
src/scss/vendor/_dropzone.scss
vendored
Normal file
@@ -0,0 +1,27 @@
|
||||
.dropzone {
|
||||
border: 1px dashed var(--#{$prefix}border-color);
|
||||
color: var(--#{$prefix}muted);
|
||||
padding: 1rem;
|
||||
|
||||
&.dz-drag-hover {
|
||||
border: 1px dashed var(--#{$prefix}primary);
|
||||
background: rgba(var(--#{$prefix}primary-rgb), .01);
|
||||
color: var(--#{$prefix}primary);
|
||||
|
||||
.dz-message {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.dz-preview {
|
||||
margin: .5rem;
|
||||
|
||||
.dz-image {
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
|
||||
.dz-success-mark {
|
||||
height: 54px;
|
||||
}
|
||||
}
|
||||
}
|
||||
13
src/scss/vendor/_fslightbox.scss
vendored
Normal file
13
src/scss/vendor/_fslightbox.scss
vendored
Normal file
@@ -0,0 +1,13 @@
|
||||
.fslightbox-container {
|
||||
font-family: inherit !important;
|
||||
background: rgba($modal-backdrop-bg, $modal-backdrop-opacity) !important;
|
||||
backdrop-filter: blur($modal-backdrop-blur) !important;
|
||||
}
|
||||
|
||||
.fslightbox-slide-number-container {
|
||||
color: inherit !important;
|
||||
}
|
||||
|
||||
.fslightbox-slash {
|
||||
background: currentColor !important;
|
||||
}
|
||||
Reference in New Issue
Block a user