Browse Source

Handlebars + hbsfy for templates

Gave it a try
Artur Paikin 9 years ago
parent
commit
466ac05ff1
5 changed files with 30 additions and 2 deletions
  1. 1 1
      bin/build-umd
  2. 2 0
      package.json
  3. 7 1
      src/plugins/DragDrop.js
  4. 17 0
      src/templates/dragdrop.hbs
  5. 3 0
      website/build-examples.js

+ 1 - 1
bin/build-umd

@@ -13,7 +13,7 @@ SRC="src/index.js"
 OUT="${OUT:-uppy.js}"
 OUTDIR="dist"
 
-FLAGS="-t [ babelify ] --standalone Uppy"
+FLAGS="-t hbsfy -t babelify --standalone Uppy"
 
 mkdir -p "${OUTDIR}"
 

+ 2 - 0
package.json

@@ -54,6 +54,8 @@
     "eslint": "1.10.3",
     "eslint-config-standard": "4.4.0",
     "eslint-plugin-standard": "1.3.1",
+    "handlebars": "^4.0.5",
+    "hbsfy": "^2.4.1",
     "http-server": "0.8.5",
     "multi-glob": "1.0.1",
     "node-notifier": "4.4.0",

+ 7 - 1
src/plugins/DragDrop.js

@@ -1,5 +1,6 @@
 import Utils from '../core/Utils'
 import Plugin from './Plugin'
+import templateDragDrop from '../templates/dragdrop.hbs'
 
 /**
 * Drag & Drop plugin
@@ -34,11 +35,16 @@ export default class DragDrop extends Plugin {
     this.handleDrop = this.handleDrop.bind(this)
     this.checkDragDropSupport = this.checkDragDropSupport.bind(this)
     this.handleInputChange = this.handleInputChange.bind(this)
+
+    console.log(templateDragDrop({
+      chooseFile: 'smth',
+      orDragDrop: 'going on here'
+    }))
   }
 
    /**
   * Checks if the browser supports Drag & Drop
-  * @return {object} true if supported, false otherwise
+  * @return {Boolean} true if supported, false otherwise
   */
   checkDragDropSupport () {
     const div = document.createElement('div')

+ 17 - 0
src/templates/dragdrop.hbs

@@ -0,0 +1,17 @@
+<form class="UppyDragDrop-form"
+      method="post"
+      action="/"
+      enctype="multipart/form-data">
+    <img class="UppyDragDrop-puppy" src="/images/uppy.svg">
+    <input class="UppyDragDrop-input"
+           type="file"
+           name="files[]"
+           data-multiple-caption="{count} files selected"
+           multiple />
+    <label class="UppyDragDrop-label" for="UppyDragDrop-input">
+      <strong>{{ chooseFile }}</strong>
+      <span class="UppyDragDrop-dragText">{{ orDragDrop }}</span>.
+    </label>
+    <button class="UppyDragDrop-btn" type="submit">Upload</button>
+  <div class="UppyDragDrop-status"></div>
+</form>

+ 3 - 0
website/build-examples.js

@@ -27,6 +27,8 @@ var path = require('path')
 var mkdirp = require('mkdirp')
 var notifier = require('node-notifier')
 var babelify = require('babelify')
+var hbsfy = require('hbsfy')
+var browserifyEjs = require('browserify-ejs')
 var browserify = require('browserify')
 var watchify = require('watchify')
 
@@ -74,6 +76,7 @@ glob(srcPattern, function (err, files) {
       .require(uppyRoot + '/src/index.js', { expose: 'uppy' })
       .require(uppyRoot + '/src/core/index.js', { expose: 'uppy/core' })
       .require(uppyRoot + '/src/plugins/index.js', { expose: 'uppy/plugins' })
+      .transform(hbsfy)
       .transform(babelify)
 
     // Listeners for changes, errors, and completion.