Version 3

.gitignore

@@ -2,4 +2,5 @@ dist
 nbproject
 data
 node_modules
-_build
+_build
+bower_components

.travis.yml

@@ -1,7 +1,7 @@
 language: node_js
 node_js:
-  - 0.10
+  - 6.1
 before_script:
- - npm install -g grunt-cli
+ - npm install -g gulp
 script:
- - grunt qa
+ - gulp

Gulpfile.js

@@ -0,0 +1,65 @@
+const gulp = require("gulp");
+const gutil = require("gulp-util");
+const webpack = require("webpack");
+var path = require("path");
+
+function webpackOptions(options) {
+  return {
+    watch: options.watch,
+    entry: {
+      "angular": './src/angular/main.js',
+      "input": './src/input/main.js',
+      "jquery": './src/jquery/main.js',
+      "codemirror-3": './src/codemirror-3/main.js',
+      "codemirror-4": './src/codemirror-4/main.js',
+    },
+    devtool: options.debug ? 'inline-source-map' : '',
+    debug: options.debug,
+    output: {
+      path: __dirname + "/dist",
+      filename: "[name].js",
+      publicPath: options.publicPath,
+    },
+    resolve: {
+      root: [
+        path.join(__dirname, "packages")
+      ],
+      extensions: ['', '.js']
+    },
+    module: {
+      loaders: [
+        {
+          test: /\.js$/,
+          include: [
+            path.join(__dirname, "src")
+          ],
+          loader: 'babel-loader',
+          query: {
+            presets: ['es2015']
+          }
+        }
+      ]
+    }
+  };
+}
+
+gulp.task("default", function (callback) {
+  webpack(webpackOptions({
+    watch: false,
+    debug: false
+  }), function (err, stats) {
+    if (err) throw new gutil.PluginError("webpack", err);
+    gutil.log("[webpack]", stats.toString());
+    callback();
+  });
+});
+
+gulp.task("watch", function () {
+  webpack(webpackOptions({
+    watch: true,
+    debug: true
+  }), function (err, stats) {
+    if (err) throw new gutil.PluginError("webpack", err);
+    gutil.log("[webpack]", stats.toString());
+  });
+});

LICENSE

@@ -1,4 +1,4 @@
-Copyright (c) 2013 Roy van Kaathoven
+Copyright (c) 2017 Roy van Kaathoven
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of
 this software and associated documentation files (the "Software"), to deal in

README.md

@@ -1,23 +1,39 @@
-# Inline Attachment 2.0.3 [![Master Branch Build Status](https://api.travis-ci.org/Rovak/InlineAttachment.png?branch=master)](http://travis-ci.org/Rovak/InlineAttachment)
+# Inline Attachment 3.0.0 [![Master Branch Build Status](https://api.travis-ci.org/Rovak/InlineAttachment.png?branch=master)](http://travis-ci.org/Rovak/InlineAttachment)
 
-Adds upload functionality to a textarea or CodeMirror instance by either drag-dropping or pasting (only in chrome) an image inside it.
+Adds upload functionality to a textarea instance by either drag-dropping or pasting (only in chrome) an image inside it.
 
-It's similar to pasting of images in Github.
+It's similar to pasting images in Github.
 
 ![demo](https://f.cloud.github.com/assets/21/678/248aac6a-40a2-11e2-9a76-fd59ded28bbe.gif)
 
+## Supported
+
+* Input and textarea
+* jQuery
+* CodeMirror 3
+* CodeMirror 4
+* Angular 1
+
 ## Getting started
 
 The latest versions are available [here](https://github.com/Rovak/InlineAttachment/tree/master/dist)
 
 **Bower**
 
-The package can be installed using [Bower](http://bower.io/)
+The package can be installed using [Bower](http://bower.io)
 
 ```
 bower install inline-attachment
 ```
 
+**NPM**
+
+The package can be installed using [NPM](https://www.npmjs.com)
+
+```
+npm install inlineattachment
+```
+
 ## Documentation
 
 Documentation can be found on [ReadTheDocs](http://inlineattachment.readthedocs.org/en/latest/)
@@ -28,15 +44,15 @@ The Demo folder contains an example in PHP on how to handle uploads.
 
 ## Build
 
-To build the project you need node, npm and grunt installed. These tools can be installed on Ubuntu as follows:
+To build the project you need node, npm and gulp installed. These tools can be installed on Ubuntu as follows:
 
 Follow the Node.js guide: [Node.js installation](https://github.com/joyent/node/wiki/Installing-Node.js-via-package-manager)
 
 Go to the project folder and run the following:
 
 ```sh
 npm install
-grunt
+npm build
 ```
 
 This should build the project and the files will appear in the `dist/` folder

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "inline-attachment",
-  "version": "2.0.0",
+  "version": "3.0.0",
   "homepage": "https://github.com/Rovak/InlineAttachment",
   "authors": [
     "Roy van Kaathoven <[email protected]>"
@@ -17,5 +17,11 @@
     "bower_components",
     "test",
     "tests"
-  ]
+  ],
+  "devDependencies": {
+    "codemirror-3": "codemirror#3.23.0",
+    "codemirror-4": "codemirror#4.13.0",
+    "angular-1": "angular#1.6.1",
+    "jquery-1": "jquery#3.1.1"
+  }
 }

demo/angularjs.html

@@ -4,21 +4,22 @@
         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
         <title>AngularJS InlineAttachment Demo</title>
 
-        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
-        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
+        <script src="../bower_components/jquery-1/dist/jquery.js"></script>
+        <script src="../bower_components/angular-1/angular.js"></script>
 
-        <script src="../src/inline-attachment.js"></script>
-        <script src="../src/input.inline-attachment.js"></script>
-        <script src="../src/angularjs.inline-attachment.js"></script>
+        <script src="../dist/angular.js"></script>
         <script type="text/javascript">
-            function textAreaCtrl($scope) {
-                $scope.receivedFile = function(file) {
-                    console.log('received file!', file);
-                }
-            }
+            angular
+                .module('demo', ['inlineattachment'])
+                .controller('textAreaCtrl', function ($scope) {
+                    $scope.receivedFile = function (file) {
+                        console.log('received file!', file);
+                    }
+                });
+
         </script>
     </head>
-    <body ng-app="inlineattachment">
+    <body ng-app="demo">
         <div ng-controller="textAreaCtrl">
             <textarea rows="10" cols="50"
                 inlineattachment

demo/codemirror.html → demo/codemirror-3.html

@@ -5,13 +5,12 @@
         <title>CodeMirror 3 InlineAttachment Demo</title>
     </head>
     <body>
-        <link href="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.24.0/codemirror.css" media="screen" rel="stylesheet" type="text/css">
-        <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.24.0/codemirror.js"></script>
+        <link href="../bower_components/codemirror-3/lib/codemirror.css" media="screen" rel="stylesheet" type="text/css">
+        <script type="text/javascript" src="../bower_components/codemirror-3/lib/codemirror.js"></script>
 
         <textarea id="code" rows="10" cols="50"></textarea>
 
-        <script src="../src/inline-attachment.js"></script>
-        <script src="../src/codemirror.inline-attachment.js"></script>
+        <script src="../dist/codemirror-3.js"></script>
         <script type="text/javascript">
             var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
                 lineNumbers: true,
@@ -21,7 +20,7 @@
                 enterMode: "keep",
                 tabMode: "shift"
             });
-            inlineAttachment.editors.codemirror3.attach(editor);
+            new InlineAttachment.CodeMirror3(editor);
         </script>
     </body>
 </html>

demo/codemirror-4.html

@@ -5,13 +5,12 @@
         <title>CodeMirror 4 InlineAttachment Demo</title>
     </head>
     <body>
-        <link href="//cdnjs.cloudflare.com/ajax/libs/codemirror/4.0.3/codemirror.css" media="screen" rel="stylesheet" type="text/css">
-        <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/codemirror/4.0.3/codemirror.js"></script>
+        <link href="../bower_components/codemirror-4/lib/codemirror.css" media="screen" rel="stylesheet" type="text/css">
+        <script type="text/javascript" src="../bower_components/codemirror-4/lib/codemirror.js"></script>
 
         <textarea id="code" rows="10" cols="50"></textarea>
 
-        <script src="../src/inline-attachment.js"></script>
-        <script src="../src/codemirror.inline-attachment.js"></script>
+        <script src="../dist/codemirror-4.js"></script>
         <script type="text/javascript">
             var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
                 lineNumbers: true,
@@ -21,7 +20,7 @@
                 enterMode: "keep",
                 tabMode: "shift"
             });
-            inlineAttachment.editors.codemirror4.attach(editor);
+            new InlineAttachment.CodeMirror4(editor);
         </script>
     </body>
 </html>

demo/input.html

@@ -8,10 +8,9 @@
 
         <textarea id="code" rows="10" cols="50"></textarea>
 
-        <script type="text/javascript" src="../src/inline-attachment.js"></script>
-        <script type="text/javascript" src="../src/input.inline-attachment.js"></script>
+        <script type="text/javascript" src="../dist/input.js"></script>
         <script type="text/javascript">
-            inlineAttachment.editors.input.attachToInput(document.getElementById("code"));
+            new InputInlineAttachment(document.getElementById("code"));
         </script>
     </body>
 </html>

demo/jquery.html

@@ -9,12 +9,11 @@
         <textarea rows="10" cols="50"></textarea>
         <textarea rows="10" cols="50"></textarea>
 
-        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
-        <script src="../src/inline-attachment.js"></script>
-        <script src="../src/jquery.inline-attachment.js"></script>
+        <script src="../bower_components/jquery-1/dist/jquery.js"></script>
+        <script src="../dist/jquery.js"></script>
         <script type="text/javascript">
             $(function() {
-                $('textarea').inlineattachment({
+                $('textarea').inlineAttachment({
                     uploadUrl: 'upload_attachment.php'
                 });
             });