feat(action buttons): Action buttons can now be customized

Action buttons can be customized by passing an object to directive attribute.
bcabanes · Feb 8, 2016 · 136e587 · 136e587
1 parent fa435b8
commit 136e587
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 8 deletions.
diff --git a/dev/app/app.js b/dev/app/app.js
@@ -17,6 +17,15 @@ angular
     vm.showControls = true;
     vm.fit = false;
 
+    vm.myButtonLabels = {
+      rotateLeft: ' (rotate left) ',
+      rotateRight: ' (rotate right) ',
+      zoomIn: ' (zoomIn) ',
+      zoomOut: ' (zoomOut) ',
+      fit: ' (fit) ',
+      crop: ' [crop] '
+    };
+
     vm.updateResultImage = function(base64) {
       vm.resultImage = base64;
       $scope.$apply(); // Apply the changes.

diff --git a/dev/index.html b/dev/index.html
@@ -26,6 +26,7 @@ <h1>Angular image cropper</h1>
           center-on-init="true"
           api="vm.cropperApi"
           crop-callback="vm.updateResultImage"
+          action-labels="vm.myButtonLabels"
         ></image-cropper>
 
         <div class="result">

diff --git a/src/imageCropper.js b/src/imageCropper.js
@@ -27,7 +27,15 @@ function Cropper(options) {
     showControls: true,
     fitOnInit: false,
     centerOnInit: false,
-    zoomStep: 0.1
+    zoomStep: 0.1,
+    actionLabels: {
+      rotateLeft: ' < ',
+      rotateRight: ' > ',
+      zoomIn: ' + ',
+      zoomOut: ' - ',
+      fit: '(fit)',
+      crop: '[crop]'
+    }
   };
 
   // Setup options.
@@ -176,18 +184,18 @@ Cropper.prototype.buildDOM = function() {
   _elements.controls.wrapper.className = 'imgCropper-controls';
 
   _elements.controls.rotateLeft = document.createElement('button');
-  _elements.controls.rotateLeft.innerHTML = ' ⟲ ';
+  _elements.controls.rotateLeft.innerHTML = this.options.actionLabels.rotateLeft;
   _elements.controls.rotateRight = document.createElement('button');
-  _elements.controls.rotateRight.innerHTML = ' ⟳ ';
+  _elements.controls.rotateRight.innerHTML = this.options.actionLabels.rotateRight;
   _elements.controls.zoomIn = document.createElement('button');
-  _elements.controls.zoomIn.innerHTML = ' ⊕ ';
+  _elements.controls.zoomIn.innerHTML = this.options.actionLabels.zoomIn;
   _elements.controls.zoomOut = document.createElement('button');
-  _elements.controls.zoomOut.innerHTML = ' ⊖ ';
+  _elements.controls.zoomOut.innerHTML = this.options.actionLabels.zoomOut;
   _elements.controls.fit = document.createElement('button');
-  _elements.controls.fit.innerHTML = ' ⊞ ';
+  _elements.controls.fit.innerHTML = this.options.actionLabels.fit;
 
   _elements.controls.crop = document.createElement('button');
-  _elements.controls.crop.innerHTML = ' ⧉ ';
+  _elements.controls.crop.innerHTML = this.options.actionLabels.crop;
 
   // Target -> Wrapper -> buttons
   _elements.controls.wrapper.appendChild(_elements.controls.rotateLeft);

diff --git a/src/imageCropperDirective.js b/src/imageCropperDirective.js
@@ -19,13 +19,17 @@ module.exports = function(angular, Cropper) {
           imageUrl: '@',
           showControls: '@',
           width: '@',
-          zoomStep: '@'
+          zoomStep: '@',
+          actionLabels: '&'
         },
         bindToController: true,
         controllerAs: 'vm',
         controller: function() {
           var self = this;
 
+          // Get action labels.
+          this.actionLabels = this.actionLabels();
+
           // Get callback.
           this.apiCallback = this.api();
           this.cropCallback = this.cropCallback();