ホーム エクスプローラ ヘルプ
サインイン
biheng
/
uppy
1
0
フォーク 0
ファイル 課題 0 プルリクエスト 0 Wiki
ソースを参照

First swing at bundles & individual builds

Kevin van Zonneveld 9 年 前
親
97bcc4853a
コミット
7a60440d4b
21 ファイル変更、169 行追加、179 行削除
分割表示 差分情報を表示
  1. 1 4
      .gitignore
  2. 44 0
      bin/builder
  3. 0 12
      bin/scripts
  4. 0 10
      bin/styles
  5. 4 6
      bin/test
  6. 0 0
      build/core/.empty
  7. 0 84
      build/index.html
  8. 0 0
      build/plugins/.empty
  9. 5 0
      examples/playground/static/css/transloadit-js-client.css
  10. 0 0
      examples/playground/static/js/transloadit-js-client.js
  11. 3 3
      package.json
  12. 49 0
      src/core/Transloadit.js
  13. 0 0
      src/core/Transloadit.scss
  14. 6 0
      src/js/core/Transloadit.scss
  15. 0 34
      src/js/core/transloadit-core.js
  16. 0 6
      src/js/plugins/transloadit-dragndrop.js
  17. 0 20
      src/js/plugins/transloadit-instagram.js
  18. 14 0
      src/plugins/DragDrop.js
  19. 9 0
      src/plugins/TransloaditBasic.js
  20. 14 0
      src/plugins/TransloaditPlugin.js
  21. 20 0
      src/plugins/Tus10.js

+ 1 - 4
.gitignore
ファイルの表示 

@@ -3,7 +3,4 @@ build/
 
 
 npm-debug.log
 
 examples/playground/static/js/app.js
 
-
 
-examples/playground/static/css/transloadit-js-client.css
 
-
 
-examples/playground/static/js/transloadit-js-client.js
 
+examples/playground/static/transloadit-js-client/

+ 44 - 0
bin/builder
ファイルの表示 

@@ -0,0 +1,44 @@
 
+#!/bin/bash
 
+TRANSFORMS="[ babelify ]"
 
+tool="${1:-node_modules/.bin/browserify}"
 
+toolBasename="$(basename "${tool}")"
 
+
 
+if [ "${toolBasename}" = "node-sass" ]; then
 
+  srcExtension="scss"
 
+  dstExtension="css"
 
+else
 
+  srcExtension="js"
 
+  dstExtension="js"
 
+fi
 
+
 
+# Individual files, built seperately
 
+allSourceFiles=""
 
+for src in $(find src -name "*.${srcExtension}" -type f); do
 
+  allSourceFiles="${allSourceFiles} ${src}"
 
+  dst="build/$(basename $(dirname ${src}))/$(basename ${src})"
 
+  echo "--> ${src} -> ${dst}"
 
+
 
+  # Argument should be browserify or watchify
 
+  if [ "${toolBasename}" = "node-sass" ]; then
 
+    "${tool}" "${src}" "${dst}"
 
+  else
 
+    "${tool}" "${src}" -o "${dst}" -t ${TRANSFORMS}
 
+  fi
 
+done
 
+
 
+# All files in one bundle
 
+if [ "${toolBasename}" = "node-sass" ]; then
 
+  "${tool}" ${allSourceFiles} "build/transloadit-bundle.${dstExtension}"
 
+else
 
+  "${tool}" ${allSourceFiles} -o "build/transloadit-bundle.${dstExtension}" -t ${TRANSFORMS}
 
+fi
 
+
 
+# Install into examples
 
+for path in $(find examples -type d -maxdepth 1 -mindepth 1); do
 
+  exampleProject="$(basename "${path}")"
 
+  rsync \
 
+    -ai \
 
+    --exclude='.DS_Store' \
 
+    --exclude='.empty' \
 
+  build/ "examples/${exampleProject}/static/transloadit-js-client"
 
+done

+ 0 - 12
bin/scripts
ファイルの表示 

@@ -1,12 +0,0 @@
 
-#!/bin/bash
 
-
 
-ENTRY=src/js/core/transloadit-core.js
 
-OUTPUT=build/transloadit-js-client.js
 
-TRANSFORMS="[ babelify ]"
 
-
 
-# Argument should be browserify or watchify
 
-$1 $ENTRY -o $OUTPUT -t $TRANSFORMS
 
-
 
-# Copy the build into all examples:
 
-set -x
 
-cp build/transloadit-js-client.js examples/playground/static/js/

+ 0 - 10
bin/styles
ファイルの表示 

@@ -1,10 +0,0 @@
 
-#!/bin/bash
 
-
 
-INPUT=src/scss/index.scss
 
-OUTPUT=build/transloadit-js-client.css
 
-
 
-node-sass $INPUT $OUTPUT
 
-
 
-# Copy the build into all examples:
 
-set -x
 
-cp build/transloadit-js-client.css examples/playground/static/css/

+ 4 - 6
bin/test
ファイルの表示 

@@ -2,14 +2,12 @@
 
 
 # Move into a known directory
 
 DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" && pwd )"
 
-cd $DIR/..
 
+cd ${DIR}/..
 
 
 npm run phantom-test -s
 
 result=$?
 
-if [ "$result" = 0 ];
 
-then
 
-  if [ "${CI}" = "true" ] && [ "${TRAVIS_PULL_REQUEST}" = "false" ];
 
-  then
 
+if [ "$result" = 0 ]; then
 
+  if [ "${CI}" = "true" ] && [ "${TRAVIS_PULL_REQUEST}" = "false" ]; then
 
     npm run zuul-test -s
 
     result=$?
 
   else
 
@@ -17,4 +15,4 @@ then
 
   fi
 
 fi
 
 
-exit $result
 
+exit ${result}

+ 0 - 0
build/core/.empty
ファイルの表示


+ 0 - 84
build/index.html
ファイルの表示 

@@ -1,84 +0,0 @@
 
-<!DOCTYPE html>
 
-<html lang="en">
 
-<head>
 
-
 
-  <!-- Basic Page Needs
 
-  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
 
-  <meta charset="utf-8">
 
-  <title>Loading...</title>
 
-  <meta name="description" content="">
 
-  <meta name="author" content="">
 
-
 
-  <!-- Mobile Specific Metas
 
-  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
 
-  <meta name="viewport" content="width=device-width, initial-scale=1">
 
-
 
-  <!-- FONT
 
-  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
 
-  <link href="//fonts.googleapis.com/css?family=Raleway:400,300,600" rel="stylesheet" type="text/css">
 
-
 
-  <!-- CSS
 
-  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
 
-  <link rel="stylesheet" href="css/normalize.css">
 
-  <link rel="stylesheet" href="css/skeleton.css">
 
-
 
-  <!-- Favicon
 
-  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
 
-  <link rel="icon" type="image/png" href="images/favicon.png">
 
-
 
-
 
-  <link rel="stylesheet" href="./transloadit-js-client.css" type="text/css" />
 
-</head>
 
-<body>
 
-
 
-  <!-- Primary Page Layout
 
-  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
 
-  <div class="container">
 
-    <div class="row">
 
-      <div class="twelve columns" style="margin-top: 10%">
 
-        <h1>
 
-          Loading..
 
-        </h1>
 
-
 
-        <h4>transloadit-js-client</h4>
 
-        <p>
 
-          With this file we can easily test the built js client locally (via <code>npm run preview</code>)
 
-          and online.
 
-        </p>
 
-
 
-        <div id="upload-target">
 
-          Loading..
 
-        </div>
 
-
 
-      </div>
 
-    </div>
 
-  </div>
 
-
 
-  <footer>
 
-    <hr />
 
-    <ul>
 
-      <li><a href="https://travis-ci.org/transloadit/transloadit-js-client">Travis</a></li>
 
-      <li><a href="https://github.com/transloadit/transloadit-js-client">GitHub</a></li>
 
-    </ul>
 
-  </footer>
 
-
 
-</body>
 
-
 
-<!-- Include the built js client -->
 
-<script src="./transloadit-js-client.js"></script>
 
-
 
-<!-- Apply the js client on a selector -->
 
-<script>
 
-  // var tl = Transloadit("#upload-target");
 
-</script>
 
-
 
-<!-- Add the branch name to the <title> and <h1> of this page -->
 
-<script>
 
-  var branch        = location.pathname.split('/')[2] || 'local-unknown';
 
-  var elTitle       = document.querySelector('title');
 
-  var elH1          = document.querySelector('h1');
 
-  var title         = 'You are reviewing branch: ' + branch;
 
-  elTitle.innerHTML = title;
 
-  elH1.innerHTML    = title;
 
-</script>
 
-</html>

+ 0 - 0
build/plugins/.empty
ファイルの表示


+ 5 - 0
examples/playground/static/css/transloadit-js-client.css
ファイルの表示 

@@ -0,0 +1,5 @@
 
+.transloadit-js-client {
 
+  font-family: "Comic Sans MS";
 
+  color: purple;
 
+  border: 1px dashed pink;
 
+  font-size: 32px; }

+ 0 - 0
examples/playground/static/js/transloadit-js-client.js
ファイルの表示


+ 3 - 3
package.json
ファイルの表示 

@@ -6,8 +6,8 @@
 
   "scripts": {
 
     "browser-sync": "browser-sync start --config bs-config.js",
 
     "build": "npm run build:js && npm run build:css",
 
-    "build:css": "bin/styles",
 
-    "build:js": "bin/scripts node_modules/.bin/browserify",
 
+    "build:css": "bin/builder node_modules/.bin/node-sass",
 
+    "build:js": "bin/builder node_modules/.bin/browserify",
 
     "build:examples": "examples/buildAll node_modules/.bin/browserify",
 
     "clean": "rm -rf build/*.js && rm -rf build/*.css",
 
     "lint": "eslint src/js/lib/**/*.js",
 
@@ -16,7 +16,7 @@
 
     "test": "bin/test",
 
     "watch": "npm run watch:css && npm run watch:js",
 
     "watch:css": "nodemon -e scss -x \"npm run build:css\"",
 
-    "watch:js": "bin/scripts node_modules/.bin/watchify"
 
+    "watch:js": "bin/builder node_modules/.bin/watchify"
 
   },
 
   "repository": {
 
     "type": "git",

+ 49 - 0
src/core/Transloadit.js
ファイルの表示 

@@ -0,0 +1,49 @@
 
+export default class Transloadit {
 
+  constructor(opts) {
 
+    // Dictates in what order different plugin types are ran:
 
+    this.types = [ 'presetter', 'selecter', 'uploader' ];
 
+
 
+    // Container for different types of plugins
 
+    this.plugins = {};
 
+  }
 
+
 
+  use(Plugin, opts) {
 
+    // Instantiate
 
+    var plugin = new Plugin(this, opts);
 
+
 
+    // Save in plugin container
 
+    if (!this.plugins[plugin.type]) {
 
+      this.plugins[plugin.type] = [];
 
+    }
 
+    this.plugins[plugin.type].push(plugin);
 
+
 
+    return this;
 
+  }
 
+
 
+  setProgress(plugin, percentage) {
 
+    // Any plugin can call this via `this.core.setProgress(this, precentage)`
 
+    console.log(plugin.type + ' plugin ' + plugin.name + ' set the progress to ' + percentage);
 
+
 
+    return this;
 
+  }
 
+
 
+  run() {
 
+    // Walk over plugins in the order as defined by this.types.
 
+    var files = []
 
+    for (var j in this.types) {
 
+      var type = this.types[j];
 
+      // Walk over all plugins of this type, passing & modifying the files array as we go
 
+      for (var i in this.plugins[type]) {
 
+        var plugin = this.plugins[type][i];
 
+        console.log('--> Now running ' + plugin.type + ' plugin ' + plugin.name + ': ');
 
+        files = plugin.run(files);
 
+        console.dir(files);
 
+        console.log('');
 
+      }
 
+    }
 
+
 
+    // core.run is the final step and retuns the results (vs every other method, returning `this`)
 
+    // for chainability
 
+    return files;
 
+  }
 
+}

+ 0 - 0
src/scss/index.scss → src/core/Transloadit.scss
ファイルの表示


+ 6 - 0
src/js/core/Transloadit.scss
ファイルの表示 

@@ -0,0 +1,6 @@
 
+.transloadit-js-client {
 
+  font-family : "Comic Sans MS";
 
+  color       : purple;
 
+  border      : 1px dashed pink;
 
+  font-size   : 32px;
 
+}

+ 0 - 34
src/js/core/transloadit-core.js
ファイルの表示 

@@ -1,34 +0,0 @@
 
-
 
-// Using classes internally
 
-class Transloadit {
 
-  constructor(options = {}) {
 
-    this.options = options;
 
-  }
 
-
 
-  use(plugin, options) {
 
-    const transloadit = this;
 
-    plugin(transloadit, options);
 
-    return this;
 
-  }
 
-
 
-  set(option) {
 
-    // set some option here
 
-    console.log(option);
 
-    return this;
 
-  }
 
-
 
-  prepare(data) {
 
-    // ...
 
-  }
 
-
 
-  upload(files) {
 
-    return new Promise(function (resolve, reject) {
 
-      // ...
 
-      resolve('upload successful');
 
-    });
 
-  }
 
-}
 
-
 
-export default function transloadit(options) {
 
-  return new Transloadit(options);
 
-}

+ 0 - 6
src/js/plugins/transloadit-dragndrop.js
ファイルの表示 

@@ -1,6 +0,0 @@
 
-// The Dragndrop plugin
 
-
 
-export default function dragndrop(options) {
 
-  console.log(options.selector);
 
-  console.log('dragging and dropping here');
 
-}

+ 0 - 20
src/js/plugins/transloadit-instagram.js
ファイルの表示 

@@ -1,20 +0,0 @@
 
-const DATA_FROM_INSTAGRAM = {
 
-  images: [
 
-    'https://unsplash.it/600/600?image=921',
 
-    'https://unsplash.it/600/600?image=870',
 
-    'https://unsplash.it/600/600?image=823'
 
-  ]
 
-};
 
-
 
-function fetchData(apiEndpoint) {
 
-  return Promise.resolve(DATA_FROM_INSTAGRAM);
 
-}
 
-
 
-export default function transloaditInstagram(core, options) {
 
-  const userID = options.userID;
 
-  fetchData('http://transloadit-endpoint/instagram/${userID}')
 
-    .then(function(data) {
 
-      console.log(data);
 
-      core.prepare(data);
 
-    });
 
-}

+ 14 - 0
src/plugins/DragDrop.js
ファイルの表示 

@@ -0,0 +1,14 @@
 
+export default class DragDrop extends TransloaditPlugin {
 
+  constructor(core, opts) {
 
+    super(core, opts);
 
+    this.type = 'selecter';
 
+  }
 
+
 
+  run(files) {
 
+    this.core.setProgress(this, 0);
 
+    var selected = [ {name: 'lolcat.jpeg'} ]
 
+    this.core.setProgress(this, 100);
 
+
 
+    return selected;
 
+  }
 
+}

+ 9 - 0
src/plugins/TransloaditBasic.js
ファイルの表示 

@@ -0,0 +1,9 @@
 
+class TransloaditBasic extends TransloaditPlugin {
 
+  constructor(core, opts) {
 
+    super(core, opts);
 
+    this.type = 'presetter';
 
+    this.core
 
+      .use(DragDrop, {modal: true, wait: true})
 
+      .use(Tus10, {endpoint: 'http://master.tus.io:8080'})
 
+  }
 
+}

+ 14 - 0
src/plugins/TransloaditPlugin.js
ファイルの表示 

@@ -0,0 +1,14 @@
 
+export default class TransloaditPlugin {
 
+  // This contains boilerplate that all TransloaditPlugins share - and should not be used
 
+  // directly. It also shows which methods final plugins should implement/override,
 
+  // this deciding on structure.
 
+  constructor(core, opts) {
 
+    this.core = core;
 
+    this.opts = opts;
 
+    this.name = this.constructor.name;
 
+  }
 
+
 
+  run(files) {
 
+    return files;
 
+  }
 
+}

+ 20 - 0
src/plugins/Tus10.js
ファイルの表示 

@@ -0,0 +1,20 @@
 
+export default class Tus10 extends TransloaditPlugin {
 
+  constructor(core, opts) {
 
+    super(core, opts);
 
+    this.type = 'uploader';
 
+  }
 
+
 
+  run(files) {
 
+    this.core.setProgress(this, 0);
 
+    var uploaded = [];
 
+    for (var i in files) {
 
+      var file = files[i];
 
+      this.core.setProgress(this, (i * 1) + 1);
 
+      uploaded[i]     = file;
 
+      uploaded[i].url = this.opts.endpoint + '/uploaded/' + file.name;
 
+    }
 
+    this.core.setProgress(this, 100);
 
+
 
+    return uploaded;
 
+  }
 
+}