Fix croppie initialization (#534)

Because of a change in croppie
(https://github.com/Foliotek/Croppie/commit/e15877101624da79032a6717d16b9529f948fc05),
the recent update broke initialization of the `Croppie` class.

Changing the class name helps.

src/directives/avatar_editor.ts

@@ -17,6 +17,8 @@
 
 // tslint:disable:max-line-length
 
+import {bufferToUrl, logAdapter} from '../helpers';
+
 /**
  * Support uploading and resizing avatar
  */
@@ -24,10 +26,9 @@ export default [
     '$window',
     '$timeout',
     '$translate',
-    '$filter',
     '$log',
     '$mdDialog',
-    function($window, $timeout: ng.ITimeoutService, $translate, $filter: any, $log: ng.ILogService, $mdDialog) {
+    function($window, $timeout: ng.ITimeoutService, $translate, $log: ng.ILogService, $mdDialog) {
         return {
             restrict: 'EA',
             scope: {
@@ -53,7 +54,7 @@ export default [
                     if (croppieInstance !== null) {
                         return croppieInstance;
                     }
-                    croppieInstance = new Croppie(element[0].querySelector('.croppie-container'), {
+                    croppieInstance = new Croppie(element[0].querySelector('.croppie-target'), {
                         viewport: {
                             type: 'square',
                             width: VIEWPORT_SIZE,
@@ -126,7 +127,7 @@ export default [
                     }
                     // get first
                     fetchFileContent(fileList[0]).then((data: ArrayBuffer) => {
-                        const image = $filter('bufferToUrl')(data, 'image/jpeg', false);
+                        const image = bufferToUrl(data, 'image/jpeg', logAdapter($log.warn, logTag));
                         setImage(image);
                     }).catch((ev: ErrorEvent) => {
                         $log.error(logTag, 'Could not load file:', ev.message);
@@ -255,7 +256,7 @@ export default [
             },
             template: `
                 <div class="avatar-editor">
-                    <div class="avatar-editor-drag croppie-container"></div>
+                    <div class="avatar-editor-drag croppie-target"></div>
                     <div class="avatar-editor-navigation" layout="column" layout-wrap layout-margin layout-align="center center">
                         <input class="file-input" type="file" style="visibility: hidden" multiple>
                           <md-button type="submit" class="file-trigger md-raised">