Another update / conflict ¯\_(ツ)_/¯

bin/build-umd

@@ -11,9 +11,8 @@ __base="$(basename ${__file} .sh)"
 
 SRC="src/index.js"
 OUT="${OUT:-uppy.js}"
-
 OUTDIR="dist"
-TRANSFORMS="[ babelify ]"
+
 FLAGS="-t [ babelify ] --standalone Uppy"
 
 mkdir -p "${OUTDIR}"

bin/build-umd-locale

@@ -0,0 +1,23 @@
+#!/usr/bin/env bash
+set -o pipefail
+set -o errexit
+set -o nounset
+# set -o xtrace
+
+# Set magic variables for current file & dir
+__dir="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
+__file="${__dir}/$(basename "${BASH_SOURCE[0]}")"
+__base="$(basename ${__file} .sh)"
+
+SRC="src/locale/ru_RU.js"
+OUT="ru_RU.js"
+OUTDIR="dist/locale"
+
+FLAGS="-t [ babelify ]"
+
+mkdir -p "${OUTDIR}"
+
+for file in ./src/locale/*.js; do
+  # echo "$file";
+  node_modules/.bin/browserify $file $FLAGS > $OUTDIR/${file##*/};
+done

package.json

@@ -8,7 +8,7 @@
     "build:lib": "babel src -d lib --stage 0",
     "build:umd:fullpath": "env OUT=uppy-fp.js ./bin/build-umd --full-paths",
     "build:umd:min": "./bin/build-umd",
-    "build:umd": "./bin/build-umd",
+    "build:umd": "./bin/build-umd && ./bin/build-umd-locale",
     "build": "npm run build:lib && npm run build:umd && npm run build:umd:min && npm run build:css",
     "clean": "rm -rf lib && rm -rf dist",
     "docs": "cd website && node documentation.js",
@@ -17,6 +17,7 @@
     "start": "npm run build && npm run web",
     "test:phantom": "zuul test/spec/upload.js --phantom",
     "test": "bin/test",
+    "test:unit": "./node_modules/.bin/babel-node test/core.spec.js",
     "watch:all": "parallelshell \"npm run watch\" \"npm run web\"",
     "watch:css": "nodemon --watch src --ext scss -x \"npm run build && node website/update.js\"",
     "watch:examples": "cd website && node build-examples.js watch",

src/core/Core.js

@@ -7,6 +7,15 @@ import Utils from '../core/Utils';
 export default class Core {
   constructor(opts) {
 
+    // set default options
+    const defaultOptions = {
+      // locale: 'en_US'
+    };
+
+    // Merge default options with the ones set by user
+    this.opts = defaultOptions;
+    Object.assign(this.opts, opts);
+
     // Dictates in what order different plugin types are ran:
     this.types = [ 'presetter', 'selecter', 'uploader' ];
 
@@ -32,6 +41,25 @@ export default class Core {
     return this;
   }
 
+  /**
+ * Translate a string into the selected language (this.locale).
+ * Return the original string if locale is undefined
+ *
+ * @param {string} string that needs translating
+ * @returns {string} translated string
+ */
+  translate(string) {
+    const dictionary = this.opts.locale;
+
+    // if locale is unspecified, return the original string
+    if (!dictionary) {
+      return string;
+    }
+
+    const translatedString = dictionary[string];
+    return translatedString;
+  }
+
   /**
  * Sets plugin’s progress, for uploads for example
  *
@@ -66,6 +94,8 @@ export default class Core {
       method : 'run'
     });
 
+    console.log(`translation is all like: ${this.translate('Choose a file')}` );
+
     // First we select only plugins of current type,
     // then create an array of runType methods of this plugins
     let typeMethods = this.types.filter(type => {

src/index.js

@@ -1,7 +1,10 @@
 import Core from './core';
 import plugins from './plugins';
 
+const locale = {};
+
 export default {
   Core,
-  plugins
+  plugins,
+  locale
 };

src/locale/en_US.js

@@ -0,0 +1,7 @@
+var en_US = {
+  "Choose a file": "Choose a file",
+  "or drag & drop": "or drag & drop"
+};
+
+Uppy.locale.en_US = en_US;
+export default en_US;

src/locale/ru_RU.js

@@ -0,0 +1,7 @@
+var ru_RU = {
+  "Choose a file": "Выберите файл",
+  "or drag & drop": "или перенесите его сюда"
+};
+
+Uppy.locale.ru_RU = ru_RU;
+export default ru_RU;

src/plugins/DragDrop.js

@@ -59,6 +59,7 @@ export default class DragDrop extends Plugin {
   }
 
   listenForEvents() {
+    console.log(`translation is all like: ${this.core.translate('Choose a file')}` );
     console.log(`waiting for some files to be dropped on ${this.opts.selector}`);
 
     if (this.isDragDropSupported) {

test/core.spec.js

@@ -1,14 +1,22 @@
 var test = require('tape');
 var Core = require('../src/core/index.js');
 
-const core = new Core();
-
 test('core object', function (t) {
+  const core = new Core();
   t.equal(typeof core, 'object', 'new Core() should return an object');
   t.end();
 });
 
 test('core type', function (t) {
+  const core = new Core();
   t.equal(core.type, 'core', 'core.type should equal core');
   t.end();
 });
+
+test('translation', function (t) {
+  const russianDict = require('../src/locale/ru_RU.json');
+  const core = new Core({locale: russianDict});
+
+  t.equal(core.translate('Choose a file'), 'Выберите файл', 'should return translated string');
+  t.end();
+});

website/_config.yml

@@ -5,9 +5,9 @@
 # Uppy versions, auto updated by update.js
 uppy_version: 0.0.1
 
-uppy_dev_size: "80.27"
-uppy_min_size: "80.27"
-uppy_gz_size: "80.27"
+uppy_dev_size: "81.15"
+uppy_min_size: "81.15"
+uppy_gz_size: "81.15"
 
 # Theme
 google_analytics: UA-63083-12

website/src/examples/i18n/app.css

@@ -0,0 +1,10 @@
+/* Drag & Drop CSS to style the demo itself */
+
+.UppyDragDrop-puppy {
+  max-width: 80px;
+}
+
+.UppyDragDropExample-credit {
+  display: block;
+  margin: 20px 0;
+}

website/src/examples/i18n/app.es6

@@ -0,0 +1,11 @@
+import Uppy from 'uppy/core';
+import { DragDrop, Tus10 } from 'uppy/plugins';
+
+const ru_RU = require('../../../../src/locale/ru_RU.js');
+
+const uppy = new Uppy({wait: false, locale: ru_RU});
+const files = uppy
+  .use(Tus10, {endpoint: 'http://master.tus.io:8080/files/'})
+  .run();
+
+console.log('--> Uppy Bundled version with Tus10 & Russian language pack has loaded');

website/src/examples/i18n/app.html

@@ -0,0 +1,26 @@
+<!-- Basic Uppy styles -->
+<link rel="stylesheet" href="/css/uppy.css">
+
+<form id="upload-target" class="UppyDragDrop" method="post" action="/" enctype="multipart/form-data">
+  <img class="UppyDragDrop-puppy" src="/images/uppy.svg">
+  <div>
+    <input id="UppyDragDrop-input" class="UppyDragDrop-input" type="file" name="files[]" data-multiple-caption="{count} files selected" multiple />
+    <label class="UppyDragDrop-label" for="UppyDragDrop-input">
+      <strong>Choose a file</strong>
+      <span class="UppyDragDrop-dragText"> or drag it here</span>.
+    </label>
+  </div>
+  <div class="UppyDragDrop-status"></div>
+</form>
+
+<!-- Load the Uppy CDN version and Russian language pack -->
+<script src="/uppy/uppy.js"></script>
+<script src="/uppy/locale/ru_RU.js"></script>
+<script>
+  var uppy = new Uppy.Core({locale: Uppy.locale.ru_RU});
+  uppy.use(Uppy.plugins.DragDrop, {selector: '#upload-target'});
+  uppy.use(Uppy.plugins.Tus10);
+  uppy.run();
+
+  console.log('--> Uppy CDN version with Tus10, DragDrop & Russian language pack has loaded');
+</script>

website/src/examples/i18n/index.ejs

@@ -0,0 +1,35 @@
+---
+title: i18n
+layout: example
+type: examples
+order: 1
+---
+
+{% blockquote %}
+Here you'll see a demo of how you might set Uppy to work with language packs (i18n). Actually, two examples: the CDN & Bundled / UMD.
+{% endblockquote %}
+
+<link rel="stylesheet" href="app.css">
+<% include app.html %>
+<script src="app.js"></script>
+
+<hr />
+
+<p id="console-wrapper">
+  Console output (latest logs are at the top): <br />
+</p>
+
+<p>
+  To load from CDN we're using the following HTML and JavaScript:
+</p>
+{% include_code lang:html i18n/app.html %}
+
+<p>
+  Or, if we want the UMD version, this JavaScript:
+</p>
+{% include_code lang:js i18n/app.es6 %}
+
+<p>
+  And the following CSS:
+</p>
+{% include_code lang:css dragdrop/app.css %}

website/themes/uppy/layout/example.ejs

@@ -7,7 +7,7 @@
   It is later made visible, and moved into the #console-wrapper to position it in layout how
   you see fit.
   -->
-  <textarea id="console-log"></textarea>
+  <textarea id="console-log" class="Console"></textarea>
   <script>
   console.log = (function (old_function, div_log) {
     return function (text) {

website/themes/uppy/source/css/_common.scss

@@ -51,6 +51,13 @@ code {
 
 em { color: $color-light; }
 
+hr {
+  border: 0;
+  background: none;
+  border-top: 1px solid $color-gray;
+  margin: 3em 0;
+}
+
 a.button {
   display: inline-block;
   font-family: $fontFamily-code;

website/themes/uppy/source/css/_examples.scss

@@ -1,10 +1,15 @@
-#console-log {
-  border     : 1px solid #ccc;
+/**
+* Console
+*/
+
+.Console {
+  border: 1px solid $color-primary;
   font-family: monospace;
-  font-size  : 12px;
-  line-height: 12px;
-  height     : 112px;
-  overflow   : hidden;
-  width      : 100%;
-  display    : none;
+  font-size: 13px;
+  line-height: 1.4;
+  width: 100%;
+  min-height: 150px;
+  // overflow: hidden;
+  display: none;
+  padding: 10px 10px;
 }

website/themes/uppy/source/uppy/dragdrop.css

@@ -0,0 +1,33 @@
+/**
+* Drag & Drop CSS to style the plugin
+*/
+.UppyDragDrop {
+  width: 300px;
+  text-align: center;
+  padding: 100px 10px; }
+
+/* http://tympanus.net/codrops/2015/09/15/styling-customizing-file-inputs-smart-way/ */
+.UppyDragDrop-input {
+  width: 0.1px;
+  height: 0.1px;
+  opacity: 0;
+  overflow: hidden;
+  position: absolute;
+  z-index: -1; }
+
+.UppyDragDrop.is-dragdrop-supported {
+  border: 2px dashed;
+  border-color: #ccc; }
+
+.UppyDragDrop-label {
+  cursor: pointer; }
+
+.UppyDragDrop-dragText {
+  display: none; }
+
+.is-dragdrop-supported .UppyDragDrop-dragText {
+  display: inline; }
+
+.UppyDragDrop.is-dragover {
+  border-color: #d2ecea;
+  background-color: #dbf5f3; }

website/themes/uppy/source/uppy/locale/en_US.js

@@ -0,0 +1,16 @@
+(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var en_US = {
+  "Choose a file": "Choose a file",
+  "or drag & drop": "or drag & drop"
+};
+
+Uppy.locale.en_US = en_US;
+exports["default"] = en_US;
+module.exports = exports["default"];
+
+},{}]},{},[1]);

website/themes/uppy/source/uppy/locale/ru_RU.js

@@ -0,0 +1,16 @@
+(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var ru_RU = {
+  "Choose a file": "Выберите файл",
+  "or drag & drop": "или перенесите его сюда"
+};
+
+Uppy.locale.ru_RU = ru_RU;
+exports["default"] = ru_RU;
+module.exports = exports["default"];
+
+},{}]},{},[1]);

website/themes/uppy/source/uppy/uppy.css

@@ -0,0 +1,42 @@
+/**
+* Uppy CSS and all of its out-of-the-box plugins:
+*/
+/**
+* Drag & Drop CSS to style the plugin
+*/
+.UppyDragDrop {
+  width: 300px;
+  text-align: center;
+  padding: 100px 10px; }
+
+/* http://tympanus.net/codrops/2015/09/15/styling-customizing-file-inputs-smart-way/ */
+.UppyDragDrop-input {
+  width: 0.1px;
+  height: 0.1px;
+  opacity: 0;
+  overflow: hidden;
+  position: absolute;
+  z-index: -1; }
+
+.UppyDragDrop.is-dragdrop-supported {
+  border: 2px dashed;
+  border-color: #ccc; }
+
+.UppyDragDrop-label {
+  cursor: pointer; }
+
+.UppyDragDrop-dragText {
+  display: none; }
+
+.is-dragdrop-supported .UppyDragDrop-dragText {
+  display: inline; }
+
+.UppyDragDrop.is-dragover {
+  border-color: #d2ecea;
+  background-color: #dbf5f3; }
+
+.uppy {
+  font-family: "Comic Sans MS";
+  color: purple;
+  border: 1px dashed pink;
+  font-size: 32px; }

website/update.js

@@ -1,4 +1,4 @@
-var fs    = require('fs')
+var fs = require('fs')
 var path  = require('path')
 var chalk = require('chalk');
 
@@ -34,15 +34,21 @@ fs.writeFileSync(
 )
 
 // Copy latest uppy version into website so the CDN example can use it
-fs.writeFileSync(
-  webRoot + '/themes/uppy/source/js/uppy.js',
-  fs.readFileSync(locations.dev, 'utf-8')
-);
-console.info(chalk.green('✓ injected: '), chalk.dim('uppy.js build into site'));
+// fs.writeFileSync(
+//   webRoot + '/themes/uppy/source/js/uppy.js',
+//   fs.readFileSync(locations.dev, 'utf-8')
+// );
+// console.info(chalk.green('✓ injected: '), chalk.dim('uppy.js build into site'));
+//
+//
+// fs.writeFileSync(
+//   webRoot + '/themes/uppy/source/css/uppy.css',
+//   fs.readFileSync(locations.css, 'utf-8')
+// );
+// console.info(chalk.green('✓ injected: '), chalk.dim('uppy.css build into site'));
 
-
-fs.writeFileSync(
-  webRoot + '/themes/uppy/source/css/uppy.css',
-  fs.readFileSync(locations.css, 'utf-8')
-);
-console.info(chalk.green('✓ injected: '), chalk.dim('uppy.css build into site'));
+// Copy latest uppy version into website so the CDN example can use it
+var exec = require('child_process').exec;
+exec('cp -fR ./dist/. ./website/themes/uppy/source/uppy', function (error, stdout, stderr) {
+  console.info(chalk.green('✓ injected: '), chalk.dim('uppy umd build into site'));
+});