cropit and dropzone services

frontend/gulpfile.js

@@ -186,12 +186,21 @@ gulp.task('vendorsources', function() {
     .pipe(gulp.dest(misago + 'js'));
 });
 
-gulp.task('copyvendors', function() {
+gulp.task('copyvendors', ['copyzxcvbn'], function() {
   return gulp.src([
-      'zxcvbn/dist/*'
+      'cropit/dist/jquery.cropit.js',
+      'dropzone/dist/dropzone.js'
     ].map(function(item) {
       return 'node_modules/' + item;
     }))
+    .pipe(sourcemaps.init())
+    .pipe(uglify())
+    .pipe(sourcemaps.write('.'))
+    .pipe(gulp.dest(misago + 'js'));
+});
+
+gulp.task('copyzxcvbn', function() {
+  return gulp.src('node_modules/zxcvbn/dist/*')
     .pipe(gulp.dest(misago + 'js'));
 });
 

frontend/package.json

@@ -45,6 +45,7 @@
     "gulp-rename": "^1.2.2",
     "gulp-sourcemaps": "^1.6.0",
     "gulp-uglify": "^1.5.1",
+    "history": "^1.17.0",
     "jquery": "2.1.x",
     "jquery-mockjax": "^2.0.1",
     "moment": "^2.10.6",
@@ -52,6 +53,7 @@
     "react-addons-test-utils": "^0.14.5",
     "react-dom": "^0.14.3",
     "react-redux": "^4.0.6",
+    "react-router": "^1.0.3",
     "redux": "^3.0.5",
     "vinyl-buffer": "^1.0.0",
     "vinyl-source-stream": "^1.1.0",

frontend/src/components/change-avatar/root.js

@@ -4,6 +4,8 @@ import Loader from 'misago/components/modal-loader'; // jshint ignore:line
 import misago from 'misago/index';
 import { updateAvatar } from 'misago/reducers/users'; // jshint ignore:line
 import ajax from 'misago/services/ajax';
+import cropit from 'misago/services/cropit';
+import dropzone from 'misago/services/dropzone';
 import store from 'misago/services/store'; // jshint ignore:line
 
 export class ChangeAvatarError extends React.Component {
@@ -39,7 +41,9 @@ export class ChangeAvatarError extends React.Component {
 export default class extends React.Component {
   componentDidMount() {
     Promise.all([
-      ajax.get(misago.get('user').avatar_api_url)
+      ajax.get(misago.get('user').avatar_api_url),
+      cropit.load(),
+      dropzone.load()
     ]).then((resolutions) => {
       this.setState({
         'component': AvatarIndex,

frontend/src/initializers/cropit.js

@@ -0,0 +1,12 @@
+import misago from 'misago/index';
+import include from 'misago/services/include';
+import cropit from 'misago/services/cropit';
+
+export default function initializer() {
+  cropit.init(include);
+}
+
+misago.addInitializer({
+  name: 'cropit',
+  initializer: initializer
+});

frontend/src/initializers/dropzone.js

@@ -0,0 +1,12 @@
+import misago from 'misago/index';
+import include from 'misago/services/include';
+import dropzone from 'misago/services/dropzone';
+
+export default function initializer() {
+  dropzone.init(include);
+}
+
+misago.addInitializer({
+  name: 'dropzone',
+  initializer: initializer
+});

frontend/src/services/cropit.js

@@ -0,0 +1,39 @@
+import jQuery from 'jQuery';
+
+export class Cropit {
+  init(include) {
+    this._include = include;
+  }
+
+  load() {
+    if (typeof jQuery.cropit === "undefined") {
+      this._include.include('misago/js/jquery.cropit.js');
+      return this._loadingPromise();
+    } else {
+      return this._loadedPromise();
+    }
+  }
+
+  _loadingPromise() {
+    return new Promise(function(resolve) {
+      var wait = function() {
+        if (typeof jQuery.cropit === "undefined") {
+          window.setTimeout(function() {
+            wait();
+          }, 200);
+        } else {
+          resolve();
+        }
+      };
+      wait();
+    });
+  }
+
+  _loadedPromise() {
+    return new Promise(function(resolve) {
+      resolve();
+    });
+  }
+}
+
+export default new Cropit();

frontend/src/services/dropzone.js

@@ -0,0 +1,39 @@
+import jQuery from 'jQuery';
+
+export class Dropzone {
+  init(include) {
+    this._include = include;
+  }
+
+  load() {
+    if (typeof jQuery.dropzone === "undefined") {
+      this._include.include('misago/js/dropzone.js');
+      return this._loadingPromise();
+    } else {
+      return this._loadedPromise();
+    }
+  }
+
+  _loadingPromise() {
+    return new Promise(function(resolve) {
+      var wait = function() {
+        if (typeof jQuery.dropzone === "undefined") {
+          window.setTimeout(function() {
+            wait();
+          }, 200);
+        } else {
+          resolve();
+        }
+      };
+      wait();
+    });
+  }
+
+  _loadedPromise() {
+    return new Promise(function(resolve) {
+      resolve();
+    });
+  }
+}
+
+export default new Dropzone();

frontend/src/utils/test-utils.js

@@ -13,7 +13,7 @@ export function render(containerOrComponent, Component) {
   }
 }
 
-export function emptyTestContainers() {
+export function unmountComponents() {
   ReactDOM.unmountComponentAtNode(document.getElementById('dropdown-mount'));
   ReactDOM.unmountComponentAtNode(document.getElementById('modal-mount'));
   ReactDOM.unmountComponentAtNode(document.getElementById('page-mount'));

frontend/tests/banned-page.js

@@ -32,7 +32,7 @@ describe('Show Banned Page', function() {
   });
 
   afterEach(function() {
-    testUtils.emptyTestContainers();
+    testUtils.unmountComponents();
   });
 
   it("renders banned page", function(done) {

frontend/tests/captcha.js

@@ -37,7 +37,7 @@ describe("QACaptcha", function() {
   });
 
   afterEach(function() {
-    testUtils.emptyTestContainers();
+    testUtils.unmountComponents();
     testUtils.snackbarClear(snackbar);
     $.mockjax.clear();
   });
@@ -166,7 +166,7 @@ describe("ReCaptcha", function() {
   afterEach(function() {
     delete window.grecaptcha;
 
-    testUtils.emptyTestContainers();
+    testUtils.unmountComponents();
     testUtils.snackbarClear(snackbar);
     $.mockjax.clear();
   });

frontend/tests/components/auth-message.js

@@ -5,7 +5,7 @@ import * as testUtils from 'misago/utils/test-utils';
 
 describe("Auth Message", function() {
   afterEach(function() {
-    testUtils.emptyTestContainers();
+    testUtils.unmountComponents();
   });
 
   it('renders stateless', function() {

frontend/tests/components/avatar.js

@@ -5,7 +5,7 @@ import * as testUtils from 'misago/utils/test-utils';
 
 describe("Avatar", function() {
   afterEach(function() {
-    testUtils.emptyTestContainers();
+    testUtils.unmountComponents();
   });
 
   it('renders guest avatar', function() {

frontend/tests/components/banned-page.js

@@ -6,7 +6,7 @@ import * as testUtils from 'misago/utils/test-utils';
 
 describe("Banned page", function() {
   afterEach(function() {
-    testUtils.emptyTestContainers();
+    testUtils.unmountComponents();
   });
 
   it('renders', function() {

frontend/tests/components/button.js

@@ -5,7 +5,7 @@ import * as testUtils from 'misago/utils/test-utils';
 
 describe("Button", function() {
   afterEach(function() {
-    testUtils.emptyTestContainers();
+    testUtils.unmountComponents();
   });
 
   it('renders', function() {

frontend/tests/components/form-group.js

@@ -5,7 +5,7 @@ import * as testUtils from 'misago/utils/test-utils';
 
 describe("Form Group", function() {
   afterEach(function() {
-    testUtils.emptyTestContainers();
+    testUtils.unmountComponents();
   });
 
   it('renders', function() {

frontend/tests/components/form.js

@@ -44,7 +44,7 @@ describe("Form", function() {
   });
 
   afterEach(function() {
-    testUtils.emptyTestContainers();
+    testUtils.unmountComponents();
   });
 
   it("validates individual field", function() {

frontend/tests/components/loader.js

@@ -5,7 +5,7 @@ import * as testUtils from 'misago/utils/test-utils';
 
 describe("Loader", function() {
   afterEach(function() {
-    testUtils.emptyTestContainers();
+    testUtils.unmountComponents();
   });
 
   it('renders', function() {

frontend/tests/components/password-strength.js

@@ -6,7 +6,7 @@ import * as testUtils from 'misago/utils/test-utils';
 
 describe("Password Strength", function() {
   afterEach(function() {
-    testUtils.emptyTestContainers();
+    testUtils.unmountComponents();
     delete window.zxcvbn;
   });
 

frontend/tests/components/register-button.js

@@ -24,7 +24,7 @@ describe("RegisterButton", function() {
 
   afterEach(function() {
     delete window.zxcvbn;
-    testUtils.emptyTestContainers();
+    testUtils.unmountComponents();
   });
 
   it('renders', function() {

frontend/tests/components/register.js

@@ -42,7 +42,7 @@ describe("Register Form", function() {
 
   afterEach(function() {
     delete window.zxcvbn;
-    testUtils.emptyTestContainers();
+    testUtils.unmountComponents();
     testUtils.snackbarClear(snackbar);
     $.mockjax.clear();
   });
@@ -208,7 +208,7 @@ describe("Register Form", function() {
 
 describe("Register Complete", function() {
   afterEach(function() {
-    testUtils.emptyTestContainers();
+    testUtils.unmountComponents();
   });
 
   it("renders user-activated message", function() {

frontend/tests/components/request-activation-link.js

@@ -25,7 +25,7 @@ describe("Request Activation Link Form", function() {
   });
 
   afterEach(function() {
-    testUtils.emptyTestContainers();
+    testUtils.unmountComponents();
     testUtils.snackbarClear(snackbar);
     $.mockjax.clear();
   });
@@ -178,7 +178,7 @@ describe("Request Activation Link Form", function() {
 
 describe("Activation Link Sent", function() {
   afterEach(function() {
-    testUtils.emptyTestContainers();
+    testUtils.unmountComponents();
   });
 
   it("renders message", function(done) { // jshint ignore:line

frontend/tests/components/request-password-reset.js

@@ -25,7 +25,7 @@ describe("Request Password Reset Form", function() {
   });
 
   afterEach(function() {
-    testUtils.emptyTestContainers();
+    testUtils.unmountComponents();
     testUtils.snackbarClear(snackbar);
     $.mockjax.clear();
   });
@@ -186,7 +186,7 @@ describe("Request Password Reset Form", function() {
 
 describe("Reset Link Sent", function() {
   afterEach(function() {
-    testUtils.emptyTestContainers();
+    testUtils.unmountComponents();
   });
 
   it("renders message", function(done) { // jshint ignore:line
@@ -221,7 +221,7 @@ describe("Account Inactive Page", function() {
   });
 
   afterEach(function() {
-    testUtils.emptyTestContainers();
+    testUtils.unmountComponents();
   });
 
   it("renders page for user-activated user", function() {

frontend/tests/components/reset-password-form.js

@@ -27,7 +27,7 @@ describe("Reset Password Form", function() {
   });
 
   afterEach(function() {
-    testUtils.emptyTestContainers();
+    testUtils.unmountComponents();
     testUtils.snackbarClear(snackbar);
     $.mockjax.clear();
   });
@@ -168,7 +168,7 @@ describe("Password Changed Page", function() {
   });
 
   afterEach(function() {
-    testUtils.emptyTestContainers();
+    testUtils.unmountComponents();
   });
 
   it("renders", function() {

frontend/tests/components/sign-in.js

@@ -30,7 +30,7 @@ describe("Sign In", function() {
   });
 
   afterEach(function() {
-    testUtils.emptyTestContainers();
+    testUtils.unmountComponents();
     testUtils.snackbarClear(snackbar);
     $.mockjax.clear();
   });

frontend/tests/components/snackbar.js

@@ -5,7 +5,7 @@ import * as testUtils from 'misago/utils/test-utils';
 
 describe("Snackbar", function() {
   afterEach(function() {
-    testUtils.emptyTestContainers();
+    testUtils.unmountComponents();
   });
 
   it('renders', function() {

frontend/tests/components/user-menu/guest-menu.js

@@ -23,7 +23,7 @@ describe("GuestMenu", function() {
   });
 
   afterEach(function() {
-    testUtils.emptyTestContainers();
+    testUtils.unmountComponents();
   });
 
   it('renders', function() {
@@ -57,7 +57,7 @@ describe("GuestNav", function() {
   });
 
   afterEach(function() {
-    testUtils.emptyTestContainers();
+    testUtils.unmountComponents();
   });
 
   it('renders', function() {
@@ -86,7 +86,7 @@ describe("CompactGuestNav", function() {
   });
 
   afterEach(function() {
-    testUtils.emptyTestContainers();
+    testUtils.unmountComponents();
   });
 
   it('renders', function() {

frontend/tests/components/user-menu/user-menu.js

@@ -20,7 +20,7 @@ describe("UserMenu", function() {
   });
 
   afterEach(function() {
-    testUtils.emptyTestContainers();
+    testUtils.unmountComponents();
   });
 
   it('renders', function() {
@@ -43,7 +43,7 @@ describe("UserNav", function() {
   });
 
   afterEach(function() {
-    testUtils.emptyTestContainers();
+    testUtils.unmountComponents();
   });
 
   it('renders', function() {
@@ -78,7 +78,7 @@ describe("CompactUserNav", function() {
   });
 
   afterEach(function() {
-    testUtils.emptyTestContainers();
+    testUtils.unmountComponents();
   });
 
   it('renders', function() {

frontend/tests/cropit.js

@@ -0,0 +1,28 @@
+import assert from 'assert';
+import { Cropit } from 'misago/services/cropit';
+
+let cropit = null;
+
+describe("Cropit", function() {
+  afterEach(function() {
+    delete window.$.cropit;
+  });
+
+  it("loads library", function(done) {
+    cropit = new Cropit();
+    cropit.init({
+      include: function(lib) {
+        assert.equal(lib, "misago/js/jquery.cropit.js", "library is requested");
+      }
+    });
+
+    cropit.load().then(function() {
+      assert.ok(true, "cropit lib was loaded");
+      done();
+    });
+
+    window.setTimeout(function() {
+      window.$.cropit = true;
+    }, 200);
+  });
+});

frontend/tests/modal.js

@@ -57,7 +57,7 @@ describe("Modal", function() {
   });
 
   afterEach(function() {
-    testUtils.emptyTestContainers();
+    testUtils.unmountComponents();
   });
 
   it('shows component', function(done) {

frontend/tests/navbar-dropdown.js

@@ -37,7 +37,7 @@ describe("Dropdown", function() {
   });
 
   afterEach(function() {
-    testUtils.emptyTestContainers();
+    testUtils.unmountComponents();
   });
 
   it('shows component', function(done) {