Dropzone (#1139)

package.json

@@ -73,6 +73,7 @@
     "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",
@@ -121,6 +122,7 @@
     "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"
@@ -138,6 +140,9 @@
     "countup.js": {
       "optional": true
     },
+    "dropzone": {
+      "optional": true
+    },
     "flatpickr": {
       "optional": true
     },

src/pages/_data/docs.yml

@@ -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

src/pages/_data/libs.json

@@ -21,10 +21,12 @@
     "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": {

src/pages/_data/menu.yml

@@ -96,6 +96,10 @@ base:
     markdown:
       title: Markdown
       url: markdown.html
+    dropzone:
+      title: Dropzone
+      url: dropzone.html
+      badge: New
     lightbox:
       title: Lightbox
       url: lightbox.html

src/pages/_docs/dropzone.md

@@ -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 %}

src/pages/_includes/ui/dropzone.html

@@ -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 %}

src/pages/dropzone.html

@@ -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>

src/scss/tabler-vendors.scss

@@ -5,6 +5,7 @@
 @import "vendor/tom-select";
 @import "vendor/apexcharts";
 @import "vendor/jsvectormap";
+@import "vendor/dropzone";
 @import "vendor/fslightbox";
 @import "vendor/plyr";
 @import "vendor/tinymce";

src/scss/vendor/_dropzone.scss

@@ -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;
+    }
+  }
+}